---
title: "AngularJs Expressions"  
description: "Hi everyone in this article I’m explaining about angularjs expressions."  
author: "Anonymous User"  
published: 2015-03-21  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1678/angularjs-expressions  
category: "angular js"  
tags: ["angularjs controller", "angularjs model"]  
reading_time: 3 minutes  

---

# AngularJs Expressions

Hi everyone in this article I’m explaining about angularjs expressions.\

##### Introduction:

AngularJS allows the following two different ways to bind data to HTML.

1. By using ng-bind directive.

2. By using expressions.

We have already gone through [directives](https://www.mindstick.com/blog/44/directives-in-asp-dot-net) in previous articles in which we discussed the ng-bind directive. Dealing with expressions is the purpose of this article.

##### AngularJS Expressions:

Expressions are used to bind the data to HTML (a view) and also decides the position of that data, how and where it should be displayed in the view. AngularJS expressions are defined inside the the double [curly braces](https://answers.mindstick.com/qa/31876/when-we-use-curly-braces-in-the-string-format-its-not-working-in-c-sharp), for example {{[expression](https://www.mindstick.com/blog/181/lambda-expression-in-c-sharp) here}}.

Like [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) expressions, AngularJS expressions can also have various valid expressions. We can use [operators](https://www.mindstick.com/articles/13159/operating-press-brakes-an-ultimate-guide-for-brake-operators) between numbers and strings, literals, objects and array’s inside the expression {{ }}. For example:

{{ 2 + 2 }} (numbers)

{{Name + " " + email}} (string)

{{ Country.Name }} (object)

{{ fact[4] }} (array)

##### AngularJs Expression vs JavaScript Expression:

1. In JavaScript, if we try to evaluate the [properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule) that are not previously defined then JavaScript generates a RefrenceError or TypeError whereas for AngularJS we will get undefined or null.

2. In JavaScript, a [control flow](https://www.mindstick.com/interview/33772/what-is-the-control-flow-function-and-its-execution-in-control-flow-statements) statement can be used whereas we cannot use one in AngularJS.

3. There is not the tradition of using a comma or void in an AngularJS expression.

4. To set the format of data, we can use a filter with an AngularJS expression, like {{expression| filter}} {{number | currency}} will format the number as a currency like $number. For example {{100|currency}} will reduce $100.00. We have more [filters in AngularJS](https://www.mindstick.com/forum/156119/how-to-use-filters-in-angularjs) like date, filter, json, and limit to, lowercase, number, and order by and uppercase.

Let's go through a simple example. We will first see how to [bind data](https://www.mindstick.com/forum/415/how-to-bind-data-in-windows-phone-7-using-wcf-service) using the ng-bind directive then we will move to the main agenda of this article, AngularJS expressions.

```
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>      <div ng-app="" ng-init="firstName='Kamlakar';lastName='Singh'">          <h1>Without using expression</h1>          Fullname : <span ng-bind="firstName +' ' + lastName "></span> //ng-bind using      </div> 
```

## \

**Output:**\

![AngularJs Expressions](https://www.mindstick.com/mindstickarticle/91368533-1640-422e-aa09-cb2c16a4f6e7/images/5e908b10-e2ce-4ea3-ad14-17515a87c98d.png)

For the same piece of the preceding code, we can bind the data by replacing ng-bind by {{expression}}. Here is how it is.

```
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>      <div ng-app="" ng-init="firstName='Kamlakar';lastName='Singh'">          <h1>using expression</h1>          Fullname : {{firstName+''+lastName}} //expression      </div>
```

## Output:

![AngularJs Expressions](https://www.mindstick.com/mindstickarticle/91368533-1640-422e-aa09-cb2c16a4f6e7/images/3782d4f2-94b5-4be3-bd0c-682a60e72c36.png)

The preceding example showed the use of a string inside an expression, just like:

{{Name + " " + email}} (string)

##### Using Filter in Expression:

\

```
<div ng-app="" ng-init="firstName='Kamlakar';lastName='Singh'">        <h1>using expression|uppercase</h1>        Fullname : {{firstName+''+lastName|uppercase}}        <!--//using filter uppercase-->    </div>
```

##### Output:

![AngularJs Expressions](https://www.mindstick.com/mindstickarticle/91368533-1640-422e-aa09-cb2c16a4f6e7/images/0476b602-c6f1-4503-a52e-38dffb3a3f6b.png)

Similarly we can apply various types of filters depending on our needs.

##### Binding and Displaying AngularJS Number:

As explained about JavaScript expression and AngularJS expressions earlier, we can use numbers inside AngularJS expressions that are just like JavaScript numbers in which we can filter using a pipe '|' character.\

```
<h1>Number|currency</h1>    <div ng-app="" ng-init="items=5;price=45.50">        <p>Total Price: {{ items * price|currency }}</p>    </div>
```

## Output:

![AngularJs Expressions](https://www.mindstick.com/mindstickarticle/91368533-1640-422e-aa09-cb2c16a4f6e7/images/2ac932b9-01a5-470c-bda6-9b11121c15a1.png)

##### Binding and Displaying AngularJs Object:

We can also use AngularJS objects just like we did with JavaScript objects.These objects are used inside an expression.\

```
<div ng-app="" ng-init="employee={name:'Kamlakar',Role:'Software Developer'}">        <p>{{ employee.name }} Singh is a {{employee.Role}}</p>    </div>
```

## Output:

![AngularJs Expressions](https://www.mindstick.com/mindstickarticle/91368533-1640-422e-aa09-cb2c16a4f6e7/images/83251204-be28-4fc8-869f-4a9c177bf0a4.png)

##### Working with Arrays in Angularjs:

AngularJS arrays behave just like we studied in JavaScript. Let's understand with a simple demo example.

```
<div ng-app="" ng-init="prime=[2,3,5,7,11,13]">        <p>Fourth primevalue is: {{ prime[4] }}</p>    </div>
```

## Output:

![AngularJs Expressions](https://www.mindstick.com/mindstickarticle/91368533-1640-422e-aa09-cb2c16a4f6e7/images/9b2f91ae-a204-478a-9b27-d20c0f8007fa.png)

---

Original Source: https://www.mindstick.com/articles/1678/angularjs-expressions

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.