首页 > 网站 > WEB开发 > 正文

angularJS-filter过滤器

2024-04-27 15:17:09
字体:
来源:转载
供稿:网友

根据特定字符串过滤

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

下一篇:ES6/ES2015核心内容(下)

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表