Home >Web Front-end >JS Tutorial >AngularJS introductory tutorial - AngularJS expression_AngularJS
Expressions are used for application data binding to HTML. Expressions are written in double brackets like {{expression}}. The behavior in expressions is the same as the ng-bind directive. AngularJS application expressions are pure javascript expressions and output the data they are used in there.
AngularJS expression format: {{expression }}
AngularJS expressions can be strings, numbers, operators and variables
Number operations {{1 + 5}}
String concatenation {{ 'abc' + 'bcd' }}
Variable operations {{ 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>总价: {{ quantity * cost }}</p> </div>
Output of the above example:
Total price: 10
Code comments:
ng-init="quantity=2;cost=5" //Equivalent to var quantity=2,cost=5;
in javascript
The same functionality can be achieved using ng-bind
<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> //这里的ng-bind相当于指定了span的innerHTML </div>
2.Angularjs string
<div ng-app="" ng-init="firstName='John';lastName='Snow'"> <p>姓名: {{ firstName + " " + lastName }}</p> </div>
Output
Name: Jone Snow
3. AngularJS Object
<div ng-app="" ng-init="person={firstName:'John',lastName:'Snow'}"> <p>姓为 {{ person.lastName }}</p> </div>
Output
The last name is Snow
4.AngularJS Array
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>
Output
The third value is 19
The above is the introduction to AngularJS expressions in the AngularJS introductory tutorial introduced by the editor. I hope it will be helpful to everyone!