如何在Angular中使用ng-options过滤选择? [英] How to filter a select with ng-options in Angular?
问题描述
我编写了以下Angular应用程序的概念证明，该应用程序允许一个人为美国总统投票.
I've written the following proof-of-concept of an Angular app that allows a person to vote for President of the US.
<!DOCTYPE html>
<html ng-app="ElectionApp"">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var ElectionApp = angular.module("ElectionApp", []);
var ElectionController = ElectionApp.controller("ElectionController", [function () {
// Pretend that this data came from an outside data-source.
this.candidates = {
"14837ac3-5c45-4e07-8f12-5771f417ca4c": {
name: "Alice",
gender: "female"
},"333eb217-c8d1-4b94-91a4-22a3770bbb22": {
name: "Bob",
gender: "male"
}
};
this.vote = function () {
// TODO: Record the user's vote.
};
}]);
</script>
</head>
<body ng-controller="ElectionController as ctrl">
Who would you like to elect President? <br />
<select
ng-model="ctrl.selection"
ng-options="person as person.name for (id, person) in ctrl.candidates | filter{gender:'female'}">
</select>
<input type="button" value="Vote!" ng-submit="ctrl.vote();" />
<h2>Candidate Profiles</h2>
<div ng-repeat="candidate in ctrl.candidates">
{{candidate.name}}, {{candidate.gender}}
</div>
</body>
</html>
我的投票应用程序显示候选人姓名列表以及每个候选人的个人资料，在这种情况下，由候选人的姓名和性别组成.
My voting app displays a list of the candidates names along with a profile for each candidate, which in this case, consists of the candidate's name and gender.
出于这个问题的目的，请假装从远程数据源中提取要选择的候选人名册，但将采用与示例相同的格式.
For the purpose of this question, please pretend that the roster of candidates to choose from is fetched from a remote data source, but will follow the same format as the example.
假设在即将举行大选之前，通过了一项宪法修正案，规定下任美国总统必须为女性.假设无法在选举时及时更新数据源，而老板对我说:我听说使用Angular，您可以使用过滤器随意选择数据源中哪些项出现在表单上.发生！"
Suppose that shortly before the election is to be held, a constitutional amendment is passed mandating that the next US President must be female. Suppose that the data source cannot be updated in time for the election, and the boss said to me, "I've heard that with Angular, you can arbitrarily choose which items from the data source appear on the form using a filter. Make it happen!"
在网上看到一些示例之后，我编写了上面的代码，但不再显示任何候选对象.我做错了什么?
Following along with some examples I've seen on-line, I've written the above code, but it no longer displays any candidate. What did I do wrong?
如何使用Angular过滤器过滤选择列表中的选项?
How can I filter the options in a select list using an Angular filter?
推荐答案
filter只能对数组进行操作.
filter can only operate on arrays.
但是您可以创建一个自定义过滤器:
But you can create a custom filter:
ElectionApp.filter('females', [ function() {
return function (object) {
var array = [];
angular.forEach(object, function (person) {
if (person.gender == 'female')
array.push(person);
});
return array;
};
}]);
然后写
ng-options="name as person.name for (id, person) in ctrl.candidates | females">
这篇关于如何在Angular中使用ng-options过滤选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
