如何使用 AngularJS 过滤数组并使用过滤对象的属性作为 ng-model 属性？

如果我有一个对象数组，我想绑定角度模型的属性的一个元素的基础上，一个过滤器，我如何做到这一点？我可以用一个具体的例子来更好地解释:

HTML:

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<input ng-model="results.year">
<input ng-model="results.subjects.title | filter:{grade:'C'}">
</body>
</html>

总监:

function MyCtrl($scope) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
}

http://jsbin.com/adisax/1/edit

我希望过滤第二个输入到主题中的信息，得到 C 级，但是我不希望将模型绑定到 成绩; 我希望将它绑定到具有 C 级的主题的 书名。

这可能吗，如果可能的话，怎么做呢？

308306 次浏览
小开
最佳答案 
<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
<input ng-model="subject.title" />
</div>
小开

您可以使用控制器中的“过滤器”过滤器来获得所有的“ C”等级。获取结果数组的第一个元素将给出评分为“ C”的主题的 书名。

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

Http://jsbin.com/ewitun/1/edit

普通 ES6也是如此:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]
小开

下面是一个修改后的 JSBin 和一个工作示例:

Http://jsbin.com/sezamuja/1/edit

下面是我对输入中的过滤器所做的处理:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">
小开

如果要在控制器中创建单独的结果列表，可以应用筛选器

function MyCtrl($scope, filterFilter) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
//create a filtered array of results
//with grade 'C' or subjects that have been failed
$scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

然后您可以像引用 结果对象一样引用 失败科目

你可以在这里了解更多 Https://docs.angularjs.org/guide/filter

因为这个回答角度已经更新了文档，他们现在建议调用过滤器

// update
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
小开

你可以 还有使用 功能和 $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
return item.grade !== 'A';
});
小开

请注意，如果像这样使用 $filter:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

你碰巧有另外一个分数，我不知道，CC 或者 AC 或者 C + 或者 CCC 把他们拉进来。你需要附加一个完全匹配的要求:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

这真的要了我的命，当我把一些佣金的细节，像这样:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

只是因为一个窃听器被叫来，因为它的佣金 ID 是56而不是6。

加上真实的力量是完全匹配的。

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

不过，我还是更喜欢这样(我使用类型脚本，因此使用了“ Let”和 = >) :

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{
return item.commission_type_id === 6;
})[0];

我这样做是因为，在未来的某个时候，我可能希望从过滤的数据中获得更多的信息，等等。.功能就在那里，让引擎盖打开了。

小开

在 HTML 中对多个列应用相同的过滤器，例如:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)
小开

如果你正在使用 ES6，你可以:

var sample = [1, 2, 3]


var result = sample.filter(elem => elem !== 2)


/* output */
[1, 3]

还要注意过滤器不更新现有的数组，它会返回一个新的过滤数组每次。


提交答案