AngularJS Expression Detailed Explanation and Example Code

After understanding the basic usage of AngularJS, let's learn about the related content of expressions together with the PDF.

　　Expressions in AngularJS are not exactly the same as in JavaScript.

　　Firstly, its expression must be placed in {{}} to be used, and secondly, compared to the concept of expressions in JavaScript, it has the following differences:

　　1 Different scopes

　　The default scope in JavaScript is window, but it is different in angularJs. It uses $scope to control the scope.

　　2 Allow undefined values

　　In angularjs, if an undefined expression is used, no error will occur, and an empty value will be returned directly.

　　3 Filter

　　The | pipe command can be used in expressions to add filters, similar to the command line in UNIX.　

　　4 $ symbol

　　Used to distinguish between angular methods and user-defined methods.

　　Let's take a look at a small piece of code:

!doctype html
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      name:<input ng-model="name" type="text">
      <button ng-click="reset()">reset</button>
      <br>
      {{name}}
      <br>
      hello! {{test}}
      <br>
      filter: {{name | uppercase}}
    </div>
    <script type="text/javascript">
      function ctl($scope) {
        var str = "init";
        $scope.name = str;
        $scope.reset = function() {
          $scope.name = str;
        }
      }
    </script>
  </body>
</html>

　　Through the reset trigger, the reset method resets the content of the name variable;

　　In the expression, the undefined test is referenced, but no error is reported, and it is displayed as empty directly; —— {{test}}

　　Finally, use the filter to convert the value of the expression's name to uppercase. —— {{name | uppercase}}

　　Running Result:

　　　　 This is the organization of the materials for AngularJS expressions. More related materials will be added later, thank you for your support!

Basic Tutorial