angularjs培訓之filter

標籤：angularjs   filter   

在angularjs中，filter提供了格式化資料或者過濾資料的功能：

1、請看下面簡單的例子

<div ng-controller="phoneListExtendController">

I have {{friends.length}} friends. They are:

 <input type="search" ng-model="q" placeholder="filter friends..." />

 <ul>

   <li ng-repeat="friend in friends | filter:q">

     [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

   </li>

 </ul>

 <hr>

 <ul>

   <li ng-repeat="name in names | filter : ‘j‘">

      [{{$index + 1}}] is {{name}}. 

   </li>

   total {{names.length}}

 </ul>

</div>

controller定義在了controller2.js中，我們只用ng-repeat指令迴圈遍曆friends，顯示每個人的姓名和年齡，

這個不是我們今天介紹的重點，繼續看：

我們通過管道方式使用filter ng-repeat="friend in friends | filter:q"，並且filter綁定了一個model，

這個model是個input框，也就是說你輸入的內容就是做為了ng-repeat的輸入，遍曆friends中的屬性，判斷是否包含

輸入的字元。

效果如下：

2、也可以指定要過濾的字串，代碼如下：

<li ng-repeat="name in names | filter : ‘j‘">

      [{{$index + 1}}] is {{name}}. 

   </li>

3、如果在controller中動態指定需要過濾的內容，修改代碼如下：

<li ng-repeat="friend in friends | filter:q.name">

[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.

</li>

另外還需要在controller中給$scope掛一個屬性值，

$scope.q = {

name : ‘m‘

}

有上述的代碼就可以實現動態過濾集合的功能。

4、自訂filter

   當然內建的filter無法滿足你所有的需求，這時你就可以搞了，想怎麼搞就可以怎麼搞了，你要你願意。

   通常我們可以使用module的filter方法來定義一個。如下：

   module.filter(filterName,function(){

    return function(input){

        return ;

    }

   }); 

   我們現在先實現一個用filter給字串增加個！號，

   先聲明一個字串 $scope.filters = ‘this is my first filter‘;

   接下來我們來定義filter：

   app.filter(‘myFilter‘,function(){

    return function(input){

        return input + "!";

    }

}); 

   說明： myFilter ：filter名稱

          input ： 定義的字串的值。

   下面就是顯示內容了：      

   在標籤中使用 {{filters | myFilter}}. 

   剩下來就交給你了，try it!

5、內建(build-in)filter：

currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase

這些用法都比較簡單，不再附上例子了，詳細的可以參考

http://docs.angularjs.cn/api/ng/filter  

filter的先介紹到這裡，有什麼疑問或者想法，請留言！

本文出自 “Eason's hcc” 部落格，請務必保留此出處http://hcc0926.blog.51cto.com/172833/1559668

angularjs培訓之filter