AngularJS Expression Explanation and Example Code
- 2021-07-06 09:42:26
- OfStack
AngularJS expression
AngularJS uses expressions to bind data to HTML.
The AngularJS expression is written in double braces: {{expression}}.
The AngularJS expression binds data to HTML, which is similar to the ng-bind instruction.
AngularJS "outputs" the data where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, 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 1 Expressions : {{ 5 + 5 }}</p>
</div>
</body>
</html>
Run results:
My first expression: 10
AngularJS Digital
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>Run results:
Total price: 5
Use the same example 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>Run results:
Total price: 5
Note: It is not very common to use ng-init. You will learn a better way to initialize data in Chapter 1 of Controller.
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>
Run results:
Name: John Doe
Use the same example 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>Run results:
Name: John Doe
AngularJS Object
AngularJS objects are like JavaScript objects:
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> The last name is {{ person.lastName }}</p>
</div>
</body>
</html>Run results:
Name is Doe
Use the same example 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> The last name is <span ng-bind="person.lastName"></span></p>
</div>
</body>
</html>Run results:
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> No. 1 3 The value is {{ points[2] }}</p>
</div>
</body>
</html>
Run results:
The third value is 19
Use the same example 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> No. 1 3 The value is <span ng-bind="points[2]"></span></p>
</div>
</body>
</html>Run results:
The third value is 19
AngularJS Expression and JavaScript Expression
Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, and variables.
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.
The above is the collation of AngularJS expression data, and the follow-up continues to supplement, hoping to help students who learn AngularJS.