Une brève analyse de l'utilisation du filtre AngularJS_AngularJS

J'ai étudié systématiquement Angularjs et j'ai découvert que certaines idées d'Angularjs sont très similaires au module intelligent de PHP, comme la liaison de données et le filtre. Si vous êtes familier avec smarty, il sera plus facile d'apprendre Angularjs. Cet article vous présentera l'utilisation détaillée du filtre Angularjs. Les amis intéressés peuvent apprendre ensemble

.

Présentation du filtre

Le filtre est utilisé pour formater les données.

Prototype de base de Filter (« | » est similaire au mode pipe sous Linux) :

Copier le code Le code est le suivant :

{{ expression | filtre }}

Le filtre peut être utilisé en chaîne (c'est-à-dire que plusieurs filtres sont utilisés en continu) :

Copier le code Le code est le suivant :

{{ expression | filtre1 | filtre2 ... }}

Le filtre peut également spécifier plusieurs paramètres :

Copier le code Le code est le suivant :

{{ expression | filtre:argument1:argument2:... }}

Filtre intégré AngularJS

AngularJS a intégré certains filtres couramment utilisés, examinons-les un par un.

currencyFilter (devise) :

Objectif : Formater la devise

Prototype de méthode :

Copier le code Le code est le suivant :

fonction (montant, deviseSymbol, fractionSize)

Utilisation :

{{ | monnaie}} 45386f74551be75cb370d1dbfff1d3fb
{{ . devise : '￥'}} d85d8c76563ec8d4527a34a207bb94ff
{{ . monnaie : 'CHY￥' :}} 1c84e27159766be6722e3363fec65ee3
{{ . monnaie:undéfini:0}} 72a4a8dd576bb9af21e7f062e36ff000

dateFilter(date):

Objectif : formater la date

Prototype de méthode :

Copier le code Le code est le suivant :

fonction(date, format, fuseau horaire)

Utilisation :

7978e7036e5695938a1c05fed6fd1cb2
{{ '2015-05-20T03:56:16.887Z' | date :"MM/jj/aaaa @ h:mma"}>
80a86fc4767d5e4e4219d7f111cf6e26
{{ 1432075948123 | date :"MM/jj/aaaa @ h:mma"}}
3635b1c6e9bbd5cc0025ae1de9ccf328
{{ 1432075948123 | date :"MM/jj/aaaa @ h:mma":"UTC"}}

filtreFiltre(filtre) :

Objectif : tableau de filtres

Prototype de méthode :

Copier le code Le code est le suivant :

fonction (tableau, expression, comparateur)

Utilisation 1 (utilisez String pour l'expression du paramètre) :

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

Utilisation 2 (l'expression du paramètre utilise la fonction) :

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

Utilisation 3 (utiliser un objet pour l'expression des paramètres) :

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

Utilisation 4 (préciser le comparateur comme vrai ou faux) :

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

Utilisation 5 (préciser le comparateur comme fonction) :

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

Prototype de méthode :

Copier le code Le code est le suivant :

fonction(objet, espacement)

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