AngularJS expressions
AngularJS uses expressions to bind data to HTML.
AngularJS expression is written in double braces: {{ expression }} .
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS will "output" data at the location 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 expression: {{ 5 + 5 }}</p></div></body></html>Running results:
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>Running results:
Total price: 5
The same example using 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>
Running results:
Total price: 5
Note: Using ng-init is not 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>Running results:
Name: John Doe
The same example using 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>
Running results:
Name: John Doe
AngularJS Objects
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>Running results:
Named Doe
The same example using 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>Running results:
Named 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>Running results:
The third value is 19
The same example using 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></p></div></body></html>
Running results:
The third value is 19
AngularJS expressions and JavaScript expressions
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 a compilation of AngularJS expression materials. We will continue to add them later. I hope it can help learn AngularJS classmate.