AngularJS expression detailed explanation and example code

Home>2020-03-10 14:35

AngularJS expression detailed explanation and example code

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:Useng-initNot very common.You will learn a better way to initialize data in the controller chapter.

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.

javascript