如何在AngularJs中用ng-repeat过滤（key，value）？

我正在尝试这样做：

<div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:hasSecurityId"> {{k}} {{v.pos}} </div> </div> 

AngularJs部分：

 function TestCtrl($scope) { $scope.items = { 'A2F0C7':{'secId':'12345', 'pos':'a20'}, 'C8B3D1':{'pos':'b10'} }; $scope.hasSecurityId = function(k,v) { return v.hasOwnProperty('secId'); } } 

但不知何故，它显示了我所有的项目。 如何过滤（键，值）？

Answer 1

angular度filter只能应用于数组而不是对象，从angular度的API –

“从数组中select一个项目的子集，并将其作为新数组返回。

你有两个select：
1）将$scope.items移动到数组或 –
2）预过滤ng-repeat项目，如下所示：

 <div ng-repeat="(k,v) in filterSecId(items)"> {{k}} {{v.pos}} </div> 

在控制器上：

 $scope.filterSecId = function(items) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty('secId')) { result[key] = value; } }); return result; } 

jsfiddle ： http : //jsfiddle.net/bmleite/WA2BE/

Answer 2

我的解决scheme是创build自定义filter并使用它：

 app.filter('with', function() { return function(items, field) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty(field)) { result[key] = value; } }); return result; }; }); 

而在html中：

  <div ng-repeat="(k,v) in items | with:'secId'"> {{k}} {{v.pos}} </div> 

Answer 3

或者干脆使用

 ng-show="v.hasOwnProperty('secId')" 

看到更新的解决scheme

http://jsfiddle.net/RFontana/WA2BE/93/

Answer 4

你也可以使用ng-repeat和ng-if ：

 <div ng-repeat="(key, value) in order" ng-if="value > 0"> 

Answer 5

你可以简单地使用angular.filter模块，然后你甚至可以通过嵌套的属性进行过滤。
见： jsbin
2例子：

JS：

 angular.module('app', ['angular.filter']) .controller('MainCtrl', function($scope) { //your example data $scope.items = { 'A2F0C7':{ secId:'12345', pos:'a20' }, 'C8B3D1':{ pos:'b10' } }; //more advantage example $scope.nestedItems = { 'A2F0C7':{ details: { secId:'12345', pos:'a20' } }, 'C8B3D1':{ details: { pos:'a20' } }, 'F5B3R1': { secId:'12345', pos:'a20' } }; }); 

HTML：

  <b>Example1:</b> <p ng-repeat="item in items | toArray: true | pick: 'secId'"> {{ item.$key }}, {{ item }} </p> <b>Example2:</b> <p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId' "> {{ item.$key }}, {{ item }} </p> 

Answer 6

这是晚了，但我寻找类似的filter，并结束使用这样的事情：

 <div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:{secId: '!!'}"> {{k}} {{v.pos}} </div> </div> 

Answer 7

我已经多了一个我已经在多个项目中使用的通用filter：

• object =需要过滤的对象
• field =我们要过滤的对象中的字段
• filter =需要匹配字段的filter的值

HTML：

 <input ng-model="customerNameFilter" /> <div ng-repeat="(key, value) in filter(customers, 'customerName', customerNameFilter" > <p>Number: {{value.customerNo}}</p> <p>Name: {{value.customerName}}</p> </div> 

JS：

  $scope.filter = function(object, field, filter) { if (!object) return {}; if (!filter) return object; var filteredObject = {}; Object.keys(object).forEach(function(key) { if (object[key][field] === filter) { filteredObject[key] = object[key]; } }); return filteredObject; }; 

Answer 8

虽然这个问题还比较老，但我想分享我的解决scheme给angular1开发者。 重点是只重用原始的angular度filter，但透明地传递任何对象作为数组。

 app.filter('objectFilter', function ($filter) { return function (items, searchToken) { // use the original input var subject = items; if (typeof(items) == 'object' && !Array.isArray(items)) { // or use a wrapper array, if we have an object subject = []; for (var i in items) { subject.push(items[i]); } } // finally, apply the original angular filter return $filter('filter')(subject, searchToken); } }); 

像这样使用它：

 <div> <input ng-model="search" /> </div> <div ng-repeat="item in test | objectFilter : search"> {{item | json}} </div> 

这里是一个暴徒