如何在 Angular 中使用 ng-options 过滤 select？

Question

我编写了以下 Angular 应用程序的概念验证，该应用程序允许人们投票选举美国总统。

<!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>

我的投票应用程序显示候选人姓名列表以及每位候选人的个人资料，在本例中，个人资料包括候选人的姓名和性别。

为了这个问题的目的，请假装要选择的候选人花名册是从远程数据源获取的，但会遵循与示例相同的格式。

假设在即将举行大选之前，通过了一项宪法修正案，规定下一任美国总统必须是女性。假设数据源不能及时更新选举，老大对我说，"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!"

结合我在网上看到的一些例子，我写了上面的代码，但是它不再显示任何候选人。我做错了什么？

如何使用 Angular 过滤器过滤 select 列表中的选项？

Answer 1

您只是忘记了过滤关键字后的“:”。

<select 
    ng-model="ctrl.selection"
    ng-options="person as person.name for person in ctrl.candidates | filter:{gender:'female'}">
</select>

Answer 2

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">

Answer 3

可能有点晚了，但对于其他寻找信息的人，我正在使用它。

$scope.deliveryAddresses = data;

数据复杂 Json 我的 Angular 控制器中的 webapi 由 $http.get

接收到 ID、名称和城市

我在我的 Html 页面中使用它，并带有以下代码段

ng-options="address.name for address in deliveryAddresses | filter:{name:search} track by address.id

其中搜索是对文本框的引用。简单高效。

希望对大家有所帮助。

如何在 Angular 中使用 ng-options 过滤 select？

How to filter a select with ng-options in Angular?

angularjs

ng-options

angularjs-ng-options