angularjs expression
angularjs uses expressions to bind data to html.
angularjs expressions are written in double curly braces:{{expression}}.
angularjs expressions bind data to html, which is the same asng-bindThe instructions are similar.
angularjs will "output" data where the expression is written.
angularjs expressionMuch likejavascript expression:They can contain text, operators, and variables.
Instance {{5 + 5}} or {{firstname + "" + lastname}}
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>My first expression:{{5 + 5}}</p>
</div>
</body>
</html>
operation result:
My first expression:10
angularjs numbers
angularjs numbers are like javascript numbers:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total price:{{quantity * cost}}</p>
</div>
</body>
</html>
operation result:
Total price:5
Using the same instance of ng-bind:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total price:<span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>
operation result:
Total price:5
Note:Use
angularjs string
angularjs strings are like javascript strings:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstname =" john ";lastname =" doe "">
<p>Name:{{firstname + "" + lastname}}</p>
</div>
</body>
</html>
operation result:
Name:john doe
Using the same instance of ng-bind:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstname =" john ";lastname =" doe "">
<p>Name:<span ng-bind="firstname +" "+ lastname"></span></p>
</div>
</body>
</html>
operation result:
Name:john doe
angularjs object
The angularjs object is like a javascript object:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstname:" john ", lastname:" doe "}">
<p>Last name is {{person.lastname}}</p>
</div>
</body>
</html>
operation result:
Name is doe
Using the same instance of ng-bind:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstname:" john ", lastname:" doe "}">
<p>Surname is<span ng-bind="person.lastname"></span></p>
</div>
</body>
</html>
operation result:
Name is doe
angularjs array
Angularjs arrays are like javascript arrays:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third value is {{points [2]}}</p>
</div>
</body>
</html>
operation result:
Third value is 19
Using the same instance of ng-bind:
Example code:
<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third value is<span ng-bind="points [2]"></span>
</div>
</body>
</html>
operation result:
Third value is 19
angularjs expression vs javascript expression
Similar to javascript expressions, angularjs expressions can contain letters,Operator, variable.
Unlike javascript expressions,angularjs expressions can be written in html.
Unlike javascript expressions,angularjs expressions do not support conditional judgments,Loops and exceptions.
Unlike javascript expressions,angularjs expressions support filters.
Related articles
- Analysis of AngularJS's method to solve UI interface long expression (ui-set)
- Angularjs Manually Parse Expressions ($parse)
- AngularJS expression explanation and sample code
- AngularJS expressions in AngularJS introductory tutorial
- Detailed expressions and directives in JavaScript's AngularJS framework
- Detailed expression usage in AngularJS
- Expressions of AngularJS basic study notes
- AngularJS to show and hide DOM elements
- Summary of ways to implement show or hide animation effects in AngularJS
- Several cases of AngularJS to display and hide elements
- AngularJS open page hidden display expression usage example