Angular expressions and commands

Angular expressions

• Attribute expression:
• The attribute expression corresponds to the current scope, and JavaScript corresponds to the global window object.
• Angularjs uses $ window to point to the global window object if it wants to use window scope. For example, if you use the alert () method defined in window, you must write $ window. Alert () in angularjs expressions.
• Undefined value allowed
• Angularjs can allow undefined or null when executing expressions, unlike JavaScript, which throws an exception.
• You cannot use control structures such as "condition judgment", "loop", and "Throw exception" in angularjs expressions.
• Use the filter chain to pass the expression results. For example, convert a date object to a specified read-friendly format.

For example: {1 + 2 }}

  Filter

The filter is used to filter variable values. The supported methods for linking are as follows:

{Expression | filtername: parameter1:... parametern }}

9 built-in filters

Currency, date, filter, JSON, limitto, lowercase, number, orderby, uppercase

{{ 12.0 | currency:"USD$" }}{{12.9 | currency | number:0 }}{{ 1304375948024 | date }}{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}{{ "lower cap string" | uppercase }}{{ {foo: "bar", baz: 23} | json }}ng-repeat="phone in phones | filter:query | orderBy:orderProp"

Filter XXX, which can be filtered and enhanced based on the xxx value entered on the webpage.

The orderby filter uses an array as the input, copies a copy, sorts the copies, and then outputs them to the iterator.

Custom Filter

You only need to define the required filter through app. filter.

var app = angular.module(‘myapp‘, []);app.filter(‘filter3‘,function(){      return function(items){          angular.forEach(items,function(item){              item = item + ‘!‘          });          return items;      }});

Ng command

The following describes how to match the ngbind command in different ways:

<span ng:bind="name"> angular<span ng_bind="name"> angular<span ng-bind="name"> angular<span data-ng-bind="name"> angular<span x-ng-bind="name"> angular

Commands provided by angular can basically match the attribute name, Tag Name, comment, or class name, for example:

<my-dir></my-dir><span my-dir="exp"></span><!-- directive: my-dir exp --><span class="my-dir: exp;"></span>

Custom commands

// Html <Div ng-controller = "Ctrl"> <my-customer = "Naomi"> </My-Customer> </div> // jsvar APP = Angular. module ('testpl', []); app. controller ('ctrl ', function ($ scope) {$ scope. naomi = {Name: 'atomo', address: '1970 amphitheatre'}; $ scope. vojta = {Name: 'vojta ', address: '2017 somewhere else' };}); app. directive ('mycustomer', function () {return {transclude: True, restrict: 'ace', templateurl: 'my-customer.html ', scope: {Customer:' = '}, controller: function () {return {openapi: function () {console. log ('api init ') ;}}};}); app. directive ('mymermer1', function () {return {transclude: True, restrict: 'ace ', require:' ^ mycustomer', templateurl: 'my-customer.html ', scope: {Customer: '='}, link: function (scope, element, attrs, mycustomer) {// because require is used, will add a parameter mycustomer to call the mycustomer Command Controller open API };}); // my-customer.html name: {customer. name }}address: {customer. address }}< HR> name: {vojta. name }}address: {vojta. address }}

• Restrict: indicates the matching command mode. 'A only matches the attribute name, 'E' only matches the element name, and 'C' only matches the class name.
• Scope: it can be used to isolate data models other than scope.
• Transclude: Allows internal modules to use external scopes. Use ng-transclude in the module corresponding to the templateurl. The instruction can use the template of the external scope as an internal nested template, similar to the nested of freemarker.
• Controller: You can develop APIs for other commands to complete communication between commands.

• Require: '^' prefix means that the command searches for the Controller on its parent element. By default, the specified command is searched on its own element.

Common built-in commands

• NG-app
• NG-repeat
• NG-Controller
• NG-bind-template
• NG-Model
• Complete two-way binding
• NG-Src
• Angularjs starts compiling only when the page is loaded. The ngsrc command will avoid errors caused by the request for image address not parsing when the browser loads
• NG-View
• $ Route is usually used with the ngview command. The role of the ngview command is to load the corresponding view template to the layout template for the current route.
• NG-click
• NG-init
• NG-class

 

Reference

• Http://www.html-js.com/article/AngularJS-tips-about-AngularJS-filter
• Http://angularjs.cn/A00s
• Http://www.html-js.com/article/1561

 

Angular expressions and commands