Eine kurze Analyse der Verwendung des AngularJS-Filters

Eine kurze Analyse der Verwendung des AngularJS-Filters_AngularJS

WBOY

Freigeben： 2016-05-16 15:23:11

Original

1230 Leute haben es durchsucht

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:

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

Code kopieren Der Code lautet wie folgt:

Filter kann auch mehrere Parameter angeben:

Code kopieren Der Code lautet wie folgt:

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:

dateFilter(date):

Zweck: Datum formatieren

Methodenprototyp:

Code kopieren Der Code lautet wie folgt:

Funktion(Datum, Format, Zeitzone)

Verwendung:

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

lowercaseFilter（lowercase）/uppercaseFilter（uppercase）：

方法原型：

复制代码代码如下:

function(string)

用法：

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

Nach dem Login kopieren

numberFilter（number）:

方法原型：

复制代码代码如下:

function(number, fractionSize)

用法：

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

自定义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>

Nach dem Login kopieren

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