AngularJS variable and filter usage analysis-JS Tutorial-php.cn

AngularJS variable and filter usage analysis

高洛峰

Release： 2016-12-05 17:06:41

Original

1114 people have browsed it

The examples in this article describe the usage of AngularJS variables and filters. Share it with everyone for your reference, the details are as follows:

1. About the operation of some variables

Set variables:

ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些
$scope.hour = 14; //设置hour变量在js中

Copy after login

Use variables:

(1) If it is DOM related ng-*** Write the variable name directly in the attribute

such as:

<p ng-show="hour > 13">I am visible.</p>

Copy after login

(2) If it is in the controller HTML but not in the ng attribute

use {{variable name}}

such as:

{{hour}}

Copy after login

(3) Of course, the third way is to use the above in js

plus the object name $scope.

$scope.hour

Copy after login

(4) In the form control, the variables in ng-model can be directly

at the same time Use {{variable name}} in html

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>

Copy after login

You can also bind variables through the ng-bind attribute

<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

Copy after login

(5) You can use expressions directly in ng attributes or variables

will automatically help you calculate the required js syntax

ng-show="true?false:true"
{{5+6}}
<div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>The third result is <span ng-bind="points[2]"></span></p>
</div>

Copy after login

2. Variable loop in js

<div ng-app="" ng-init="names=[&#39;Jani&#39;,&#39;Hege&#39;,&#39;Kai&#39;]">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

Copy after login

3. Variable filter

Filter Format numbers in financial format
filter Select to filter a subset from an array item.
lowercase Lowercase
orderBy Sort the array by expression
uppercase Uppercase

Such as:

<p>The name is {{ lastName | uppercase }}</p>

Copy after login

Of course, multiple function packages can be used |

<p>The name is {{ lastName | uppercase | lowercase }}</p>
//排序函数的使用
<ul>
 <li ng-repeat="x in names | orderBy:&#39;country&#39;">
  {{ x.name + &#39;, &#39; + x.country }}
 </li>
</ul>
//通过输入内容自动过滤显示结果
<div ng-app="" ng-controller="namesCtrl">
  <p><input type="text" ng-model="test"></p>
  <ul>
   <li ng-repeat="x in names | filter:test | orderBy:&#39;country&#39;">
    {{ (x.name | uppercase) + &#39;, &#39; + x.country }}
   </li>
  </ul>
</div>

Copy after login

names | filter:test | orderBy:'country '

is to filter the items in the names array according to the test form value
and then sort by the sub-element country in names

Custom filter:

<!DOCTYPE html>
<html ng-app="HelloApp">
<head>
<title></title>
</head>
<body ng-controller="HelloCtrl">
 <form>
   <input type="text" ng-model="name"/>
 </form>
 <div>{{name|titlecase}}</div>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script type="text/javascript">
  // 编写过滤器模块
  angular.module(&#39;CustomFilterModule&#39;, [])
      .filter( &#39;titlecase&#39;, function() {
    return function( input ) {
      return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
  }
  });
  // 实际展示模块
  // 引入依赖的过滤器模块 CustomFilterModule
  angular.module(&#39;HelloApp&#39;, [ &#39;CustomFilterModule&#39;])
    .controller(&#39;HelloCtrl&#39;, [&#39;$scope&#39;, function($scope){
    $scope.name = &#39;&#39;;
  }])
</script>
</body>
</html>

Copy after login