Angularjs Development Guide 5:ANGULARJS expression detailed

Source: Internet
Author: User
Tags local time

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.