Angularjs Development Guide 5:ANGULARJS expression detailed

Last Update:2015-01-27 Source: Internet

Author: User

Tags local time

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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 expressions
Property 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 values
Expressions 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 structure
You 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 filters
When 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
$ symbol
You 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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More