Angularjs expressions are similar to JavaScript code snippets, usually used in data binding, written in double curly braces, such as: {{表达式}}
. Expressions are handled using the $parse method.
Here are some of the legal angularjs expressions
1+2
3*10 | currency
user.name
You might think that the expression in the Angularjs view is a JavaScript expression, which is not entirely right, because ANGULARJS does not use JavaScript eval()
functions to execute the expression. However, you can think of the ANGULARJS expression as a JavaScript expression in addition to the following areas of distinction:
- Property Expressions: Property expressions correspond to the current scope, unlike JavaScript, which corresponds to a global window object.
- Allow undefined value: When executing an expression, Angularjs can allow undefined or null, unlike JavaScript, which throws an exception.
- There is no control structure: You cannot use "conditional judgment", "loop", "throw exception" control structures in Angularjs expressions.
- Filters (like pipe operators in Unix): You can pass the result of an expression through a filter chain. For example, convert a Date object into a specified read-friendly format.
If you want to use standard JavaScript in an expression, you should write it as a controller, and then call this method in an expression. If you want to execute the ANGULARJS expression in JavaScript, you can use the $eval () method.
As an example:
<!doctype html>functionCntl2 ($scope) {varExprs = $scope. Exprs = []; $scope. Expr= ' 3*10|currency '; $scope. Addexp=function(expr) {//within the controller defines a Addexp method, in which the standard JS code exprs.push (expr) is used; }; $scope. Removeexp=function(Index) {exprs.splice (index,1); }; } </script> Expression:<input type= ' text ' ng-model= "expr" size= "/> <button ng-click=" addexp (expr) >Evaluate</button> <ul> <li ng-repeat= "expr in Exprs" > [ <a href= "" ng-click= "Removeexp ($index)" >X</a> "<tt>{{expr}}</tt> = <span ng-bind=" $parent. $eval (expr) "></span>//The expr here is in JS, and if you want to run this angular expression, call $eval. </li> </ul> </div> </body>Property expressionsProperty expression evaluation occurs in a scope. JavaScript defaults to Window-scoped. Angularjs to use the window scope, use $window to point to the Global Window object. For example, if you use the method defined in window alert()
, you must write it in the ANGULARJS expression $window.alert()
.
As an example:
<!doctype html>function Cntl1 ($window, $scope) { = ' world '; function () { | | $window). alert (' Hello ' + $scope. Name); }} </script> <input ng-model=" name "type=" text "/> <button ng-click=" greet () ">greet </button> </div> </body>
Allow undefined valuesExpressions can be allowed and used at execution undifined
time null
. In JavaScript, calculating A.B.C throws an exception if this is not an object. But if most of the time the expression is used for data binding, as in the following form:
{{a.b.c}}
It is more meaningful for an expression to return a null value than to trigger an exception. Because usually we are waiting for the server to respond, and the variables are immediately defined and assigned. If an expression cannot tolerate undefined values, then the code we bind will have to be written as:
{{((a||{}).b||{}).c}}
Angular also returns undefined when executing an undefined function a.b.c()是,
, without triggering an exception.
No process Control structureYou cannot use a control structure in an expression. The reason for this design is that one of the ANGULARJS's design concepts is that the logic code should be in the controller. If you need to use conditions, loops, or handle exceptions, you should write them in the controller's method.
Filter filtersWhen you present the data to the user, you most likely need to convert the data into a read-friendly format. For example, you might need to convert a Date object to a user's local time format before displaying it. You can use a chain filter to pass an expression like this:
name | uppercase
This expression will name
pass the value to uppercase
this filter.
The chain filter uses the following syntax:
value | filter1 | filter2
You can also pass a colon to the filter, for example, to display 123 as a two-bit decimal form:123 | number:2
$ symbolYou might wonder, what's the use of this $ prefix? In fact, this is just a symbol of the Angularjs proprietary attribute, used to denote symbols that differ from developer's custom attributes.
Angularjs is designed to add behavior to existing objects. By using $, you can make the developer's code and ANGULARJS code in harmony.
加油!
Angularjs Development Guide 5:ANGULARJS expression detailed