angularJS-filter过滤器

根据特定字符串过滤

如果（val.name）为false，则由后面的 || “” 替换显示：

js:
$scope.friends = [{id:'1',pid:'0',name:'John', phone:'555-1276'},  
                  {id:'2',pid:'1',name:'Annie', phone:'800-BIG-MARY'},  
                  {id:'3',pid:'1',name:null, phone:'555-4321'}]
html:
<span ng-repeat="(index, val) in friends">{{val.name|| "替换的内容"}}</span>

根据特定字段进行过滤

显示phone包含为’555’的数据：

html:
<table id="searchTextResults">
 <tr ng-repeat="friend in friends|filter: {phone: '555'}">
   <td>{{friend.name}}</td>
   <td>{{friend.phone}}</td>
 </tr>
</table>

根据输入的内容进行过滤

根据query输入的数据进行过滤，并根据所选择的order来排序：

Search:
<input ng-model="query">//根据input输入的内容筛选
Sort by:
<select ng-model="order">//排序
 <option value="name">name</option>
 <option value="age">age</option>
</select>
<ul class="persons">
    <li ng-repeat="friend in friends | filter:query | orderBy:order">
        {{person.name}}
        {{person.age}}
    </li>
</ul>

计算过滤后数组的长度

根据特定字段过滤后计算过滤后数组的长度，常配合ng-if使用：

js:$scope.friends = [{id:'1',pid:'0',name:'John', phone:'555-1276'},  
                  {id:'2',pid:'1',name:'Annie', phone:'800-BIG-MARY'},  
                  {id:'3',pid:'1',name:null, phone:'555-4321'}]
html:
<span>{{(friends| filter: {phone: '555'}).length}}</span>

自定义过滤器

自定义过滤器，HTML上的myfilter2:value.id对应函数function(datalist, id)的参数：

js:
myapp.filter('myfilter2', function() {
   return function(datalist, id) {
    var newayy=[];
    angular.forEach(datalist,function(value,key){
      if(value.pid==id){
        newayy.push(value);
      }
    });
    console.log(arguments);
      return newayy;  
   };  
 });
 myapp.controller('MyFilterController', ['$scope', function($scope) {  
   $scope.friends = [{id:'1',pid:'0',name:'John', phone:'555-1276'},  
                      {id:'2',pid:'1',name:'Annie', phone:'800-BIG-MARY'},  
                      {id:'3',pid:'1',name:null, phone:'555-4321'},  
                      {id:'4',pid:'2',name:'Adam', phone:'555-5678'},  
                      {id:'5',pid:'2',name:'David', phone:'555-8765'},  
                      {id:'6',pid:'3',name:'Mikay', phone:'555-5678'}];  
 }]);
html:
<div ng-repeat="(key, value) in friends">
 <span>{{value.name}}</span>:
 <span ng-repeat="(index, val) in friends|myfilter2:value.id| orderBy:'name'">{{val.name|| "字段为空"}}</span>//myfilter2:参数2:参数3,而friends则作为第一个参数传入函数
</div>

函数过滤器

每循环一次都向函数传递3个参数，item单个对象，index所在数组的下标，detalist为repeat的数组,也可通过$scope.friends.filter（item,index,detalist）在js中单独启用过滤器：

js:
$scope.friends = [{id:'1',pid:'0',name:'John', phone:'555-1276'},  
                      {id:'2',pid:'1',name:'Annie', phone:'800-BIG-MARY'},  
                      {id:'3',pid:'1',name:'lily', phone:'555-4321'},  
                      {id:'4',pid:'2',name:'Adam', phone:'555-5678'},  
                      {id:'5',pid:'2',name:'David', phone:'555-8765'},  
                      {id:'6',pid:'3',name:'Mikay', phone:'555-5678'}];
$scope.friendsfilter=function(item,index,detalist){//item单个对象，index所在数组的下标，detalist为repeat的数组
    return item.pid=='1';
   }
JS:
function confFormatter(value, row, index) {
      return $scope.friends.filter(function(item,index,detalist) {
          return item.pid=='1';
      });
   }
$scope.MyFriends=$scope.friends.filter(function(item,index,detalist) {
          return item.pid=='1';
   });
console.log($scope.MyFriends);
html:
<div ng-repeat="(key, value) in friends|filter:friendsfilter">
        <span>{{value.name}}</span>
</div>