Analisis ringkas penggunaan Penapis AngularJS_AngularJS

Saya mengkaji angularjs secara sistematik dan mendapati bahawa beberapa idea angularjs sangat serupa dengan modul pintar php, seperti pengikatan data dan penapis. Jika anda biasa dengan smarty, lebih mudah untuk mempelajari angularjs Artikel ini akan memperkenalkan anda kepada penggunaan terperinci penapis angularjs. Rakan yang berminat boleh belajar bersama

Pengenalan Penapis

Penapis digunakan untuk memformat data.

Prototaip asas Penapis (‘|’ serupa dengan mod paip dalam Linux):

Salin kod Kod adalah seperti berikut:

{{ ungkapan |. penapis }}

Penapis boleh digunakan dalam rantai (iaitu, berbilang penapis digunakan secara berterusan):

Salin kod Kod adalah seperti berikut:

{{ ungkapan |. penapis2 |

Penapis juga boleh menentukan berbilang parameter:

Salin kod Kod adalah seperti berikut:

{{ ungkapan |. penapis: hujah1: hujah2:... }}

Penapis terbina dalam AngularJS

AngularJS mempunyai beberapa Penapis yang biasa digunakan terbina dalam, mari kita lihat satu persatu.

currencyFilter (mata wang):

Tujuan: Memformat mata wang

Prototaip kaedah:

Salin kod Kod adalah seperti berikut:

fungsi(jumlah, mata wangSimbol, Saiz pecahan)

Penggunaan:

{{ |. mata wang}} 59deb01d564a64a14b84fb15a2d15764

{{ . |. mata wang:'￥'}} fa33806122aaa1bf422f3296ebf5798c
{{ . |. mata wang:'CHY￥':}} 619c9679bfeddfe90dcd983316a0cf3f
{{ . |. currency:undefined:0}} acdf9daf6180a52f76b8639bfb55dceb

tarikhPenapis(tarikh):

Tujuan: format tarikh

Prototaip kaedah:

Salin kod Kod adalah seperti berikut:

fungsi(tarikh, format, zon waktu)

Penggunaan:

0227a1ed66338618dc4f189294648c4f

{{ '2015-05-20T03:56:16.887Z' | tarikh:"MM/dd/yyyy @ h:mma"}}
b1e8929d1be5f6dc2044b1a8d75f725e
{{ 1432075948123 |. tarikh:"MM/dd/yyyy @ h:mma"}}
0eb3059cb405622ca8e4cc29551fc3e9
{{ 1432075948123 |. tarikh:"MM/dd/yyyy @ h:mma":"UTC"}}

penapis(penapis):

Tujuan: tatasusunan penapis

Prototaip kaedah:

Salin kod Kod adalah seperti berikut:

fungsi(tatasusunan, ungkapan, pembanding)

Penggunaan 1 (gunakan String untuk ungkapan parameter):

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

Penggunaan 2 (ungkapan parameter menggunakan fungsi):

 // 先在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>

Penggunaan 3 (gunakan objek untuk ungkapan parameter):

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

Penggunaan 4 (nyatakan pembanding sebagai benar atau salah):

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

Penggunaan 5 (nyatakan pembanding sebagai fungsi):

// 先在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):

Prototaip kaedah:

Salin kod Kod adalah seperti berikut:

fungsi(objek, jarak)

用法（将对象格式化成标准的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非常方便的使数据能按我们的要求进行展示，从而使页面变得更生动。