如何过滤(键，值)与 ng- 重复在 AngularJs？

我试着做一些事情，比如:

<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');
}
}

但是不知怎么的，它显示了所有的项目。我怎么过滤(键，值) ？

143324 次浏览
小开
最佳答案

角度 过滤器只能应用于数组，而不是对象，从角度的 API-

“从数组中选择项的子集并将其作为新数组返回。”

You have two options here:
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 : < a href = “ http://jsfiddle.net/bmleite/WA2BE/”> http://jsfiddle.net/bmleite/wa2be/

小开

My solution would be create custom filter and use it:

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;
};
});

And in html:

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

或者只是简单的使用

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

点击这里查看更新的解决方案:

Http://jsfiddle.net/rfontana/wa2be/93/

小开

You can simply use 棱角过滤器 module, and then you can filter even by nested properties.
参见: < a href = “ http://jsbin.com/royuj/10/edit? html，js，output”rel = “ noReferrer”> jsbin
例子2: < br/>

约翰逊:

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>
小开

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

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

有点晚了，但是我找了一个类似的滤镜，最后用了这样的东西:

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

我做了一个更加通用的过滤器，我已经在多个项目中使用过了:

  • Object = 需要过滤的对象
  • Field = 我们要过滤的对象中的字段
  • 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>

约翰逊:

  $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;
};
小开

虽然这个问题已经很老了，但是我还是想把我的解决方案分享给角度1的开发人员。重点是只是重用原始的角度滤波器，但透明地传递任何对象作为一个数组。

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>

这是 plunker


提交答案