angularJS-filter过滤器

2019-11-02 18:25:37

字体：大中小

来源：转载

供稿：网友

根据特定字符串过滤

如果（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>

上一篇：Django

下一篇：弹出框式聊天窗口中含有iframe的拖拽问题