Home > Article > Web Front-end > AngularJS variable and filter usage analysis

AngularJS variable and filter usage analysis

高洛峰Original: 2016-12-05 17:06:411115browse

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中

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>

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

use {{variable name}}

such as:

{{hour}}

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

plus the object name $scope.

$scope.hour

(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>

You can also bind variables through the ng-bind attribute

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

(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>

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>

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>

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>

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the Function function for getting started with jsNext article：How to use the Function function for getting started with js

See more

AngularJS variable and filter usage analysis

Related articles