如果(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>
|
新聞熱點
疑難解答