AngularJS expression in AngularJS getting started tutorial

AngularJS expression in AngularJS getting started tutorial

The expression is used to bind application data to HTML. The expressions are written in double brackets like {expression }}. The behavior in the expression is the same as that in the ng-bind command. AngularJS application expressions are pure javascript expressions and output the data they are used there.

AngularJS expression format: {expression }}

AngularJS expressions can be strings, numbers, operators, and variables

Number calculation {1 + 5 }}

String connection {'abc' + 'bcd '}}

Variable calculation {firstName + "" + lastName }}, {quantity * cost }}

Object {person. lastName }}

Array {points [2]}

AngularJS example

1. Angularjs numbers

<Div ng-app = "" ng-init = "quantity = 2; cost = 5"> <p> total price: {quantity * cost }}</p> </div>

Output in the preceding example:

Total price: 10

Code comment:

Ng-init = "quantity = 2; cost = 5" // equivalent to var quantity = 2 in javascript, cost = 5;
Use ng-bind to implement the same functions

<Div ng-app = "" ng-init = "quantity = 1; cost = 5"> <p> total price: <span ng-bind = "quantity * cost"> </span> </p> // The ng-bind here is equivalent to specifying the span innerHTML </div>

2. Angularjs string

<Div ng-app = "" ng-init = "firstName = 'john'; lastName = 'snow'"> <p> Name: {{ firstName + "" + lastName }}</p> </div>

Output

Name: Jone Snow

3. AngularJS object

<Div ng-app = "" ng-init = "person = {firstName: 'john', lastName: 'snow'}"> <p> the last name is {person. lastName }}</p> </div>

Output

The last name is Snow.

4. AngularJS Array

<Div ng-app = "" ng-init = "points =, 40] "> <p> the third value is {points [2] }}</p> </div>

Output

The third value is 19.

The above is an introduction to AngularJS expressions in the AngularJS getting started tutorial. I hope it will help you!