Eine kurze Analyse der Verwendung des AngularJS-Filters_AngularJS

Ich habe AngularJS systematisch studiert und festgestellt, dass einige Ideen von AngularJS dem Smart-Modul von PHP sehr ähnlich sind, wie z. B. Datenbindung und Filter. Wenn Sie mit Smarty vertraut sind, wird es Ihnen leichter fallen, AngularJS im Detail zu lernen. Freunde, die daran interessiert sind, können es gemeinsam lernen

Einführung filtern

Filter wird zum Formatieren von Daten verwendet.

Grundlegender Prototyp von Filter („|“ ähnelt dem Pipe-Modus in Linux):

Code kopieren Der Code lautet wie folgt:

{{ Ausdruck |. Filter }}

Filter können in einer Kette verwendet werden (d. h. mehrere Filter werden kontinuierlich verwendet):

Code kopieren Der Code lautet wie folgt:

{{ Ausdruck |. filter1 |. filter2 | ... }}

Filter kann auch mehrere Parameter angeben:

Code kopieren Der Code lautet wie folgt:

{{ Ausdruck |. filter:argument1:argument2:... }}

AngularJS integrierter Filter

AngularJS verfügt über einige integrierte Filter, die häufig verwendet werden. Schauen wir sie uns einzeln an.

currencyFilter (Währung):

Zweck: Währung formatieren

Methodenprototyp:

Code kopieren Der Code lautet wie folgt:

Funktion(Betrag, Währungssymbol, Bruchgröße)

Verwendung:

{{ |. Währung}} e60bb9beadb8d3bb77b29d1fa1b5523e

{{ . |. Währung:'￥'}} 352aa634624b0adc3aa540e5d12d454e {{ . |. Währung:'CHY￥':}} bab0baa4971a9cbcdd3d92004e238967
{{ . |. Währung:undefiniert:0}} 02d3e1293c872767fedddf5519aa8c33

dateFilter(date):

Zweck: Datum formatieren

Methodenprototyp:

Code kopieren Der Code lautet wie folgt:

Funktion(Datum, Format, Zeitzone)

Verwendung:

ea988c8160345833ee0fa688f4c43e6c

{{ '2015-05-20T03:56:16.887Z' |. date:"MM/dd/yyyy @ h:mma"}}

84e08b0dff4ea4396472f1114ce050bb
{{ 1432075948123 |. Datum: „MM/tt/jjjj @ h:mma“}}
0e4816d981e6b7723ceff2f8ad73b05b
{{ 1432075948123 |. Datum: „MM/tt/jjjj @ h:mma“: „UTC“}}

filterFilter(filter):

Zweck: Filterarray

Methodenprototyp:

Code kopieren Der Code lautet wie folgt:

Funktion(Array, Ausdruck, Komparator)

Verwendung 1 (String als Parameterausdruck verwenden):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <!-- 参数expression使用String，将全文搜索关键字 'a' -->
   <div ng-repeat="u in myArr | filter:'a' ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

Verwendung 2 (Parameterausdruck verwendet Funktion):

 // 先在Controller中定义function: myFilter
 $scope.myFilter = function (item) {
   return item.age === ;
 };
 <div ng-repeat="u in myArr | filter:myFilter ">
   <p>Name:{{u.name}}</p>
   <p>Age:{{u.age}}</p>
   <br />
 </div>

Verwendung 3 (Objekt für Parameterausdruck verwenden):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <div ng-repeat="u in myArr | filter:{age: } ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

Verwendung 4 (Komparator als wahr oder falsch angeben):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   Name:<input ng-model="yourName" />
   <!-- 指定comparator为false或者undefined，即为默认值可不传，将以大小写不敏感的方式匹配任意内容 -->
   <!-- 可以试试把下面代码的comparator为true，true即大小写及内容均需完全匹配 -->
   <div ng-repeat="u in myArr | filter:{name:yourName}:false ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

Verwendung 5 (Komparator als Funktion angeben):

// 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文
 $scope.myComparator = function (expected, actual) {
   return angular.equals(expected.toLowerCase(), actual.toLowerCase());
 }
 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   Name:<input ng-model="yourName" />
   <div ng-repeat="u in myArr | filter:{name:yourName}:myComparator ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

jsonFilter(json):

Methodenprototyp:

Code kopieren Der Code lautet wie folgt:

Funktion(Objekt, Abstand)

用法（将对象格式化成标准的JSON格式）：

复制代码 代码如下:

{{ {name:'Jack', age: 21} | json}}

limitToFilter（limitTo）：

方法原型：

复制代码 代码如下:

function(input, limit)

用法（选取前N个记录）：

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <div ng-repeat="u in myArr | limitTo:">
     <p>Name:{{u.name}}
     <p>Age:{{u.age}}
   </div>
 </div>

lowercaseFilter（lowercase）/uppercaseFilter（uppercase）：

方法原型：

复制代码 代码如下:

function(string)

用法：

China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.

numberFilter（number）:

方法原型：

复制代码 代码如下:

function(number, fractionSize)

用法：

{{ "3456789" | number}}
<br />
{{ true | number}}
<br />
{{ 12345678 | number:1}}

orderByFilter（orderBy）：

方法原型：

复制代码 代码如下:

function(array, sortPredicate, reverseOrder)

用法：

 <div ng-init="myArr = [{name:'Tom', age:, deposit: }, {name:'Tom', age:, deposit: }, {name:'Tom Senior', age:, deposit: }, {name:'May', age:, deposit: }, {name:'Jack', age:, deposit:}, {name:'Alice', age:, deposit: }]">
   <!--deposit前面的'-'表示deposit这列倒叙排序，默认为顺序排序
   参数reverseOrder：true表示结果集倒叙显示-->
   <div ng-repeat="u in myArr | orderBy:['name','-deposit']:true">
     <p>Name:{{u.name}}</p>
     <p>Deposit:{{u.deposit}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

自定义Filter

和Directive一样，如果内建的Filter不能满足你的需求，你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter：capitalize_as_you_want，该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。

方法原型：

复制代码 代码如下:

function (input, capitalize_index, specified_char)

完整的示例代码：

<!DOCTYPE>
 <html>
 <head>
   <script src="/Scripts/angular.js"></script>
   <script type="text/javascript">
     (function () {
       var app = angular.module('ngCustomFilterTest', []);
       app.filter('capitalize_as_you_want', function () {
         return function (input, capitalize_index, specified_char) {
           input = input || '';
           var output = '';
           var customCapIndex = capitalize_index || -;
           var specifiedChar = specified_char || '';
           for (var i = ; i < input.length; i++) {
             // 首字母肯定是大写的， 指定的index的字母也大写
             if (i === || i === customCapIndex) {
               output += input[i].toUpperCase();
             }
             else {
               // 指定的字母也大写
               if (specified_char != '' && input[i] === specified_char) {
                 output += input[i].toUpperCase();
               }
               else {
                 output += input[i];
               }
             }
           }
           return output;
         };
       });
     })();
   </script>
 </head>
 <body ng-app="ngCustomFilterTest">
   <input ng-model="yourinput" type="text">
   <br />
   Result: {{ yourinput | capitalize_as_you_want::'b' }}
 </body>
 </html>

好了，本篇讲了AngularJS中的Filter，看完这篇后，我们可以利用好Filter非常方便的使数据能按我们的要求进行展示，从而使页面变得更生动。