如何在 Angular 中使用 ng-options 过滤选择？答案

【问题标题】：How to filter a select with ng-options in Angular?如何在 Angular 中使用 ng-options 过滤选择？
【发布时间】：2016-01-22 07:27:11
【问题描述】：

我编写了以下 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>

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

就本题而言，请假设可供选择的候选人名单是从远程数据源获取的，但将遵循与示例相同的格式。

假设在即将举行选举前不久，通过了一项宪法修正案，规定下一任美国总统必须是女性。假设数据源无法及时更新选举，老板对我说，“我听说用Angular，你可以使用过滤器任意选择数据源中的哪些项目出现在表单上。让它发生！”

根据我在网上看到的一些示例，我编写了上面的代码，但它不再显示任何候选者。我做错了什么？

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

【问题讨论】：

过滤后缺少 :
在做了更多研究之后，看起来同样的问题在 2 年前被问到：stackoverflow.com/questions/14788652。那里的答案是 Angular 不这样做，但我认为必须有一些合理的方法。
"我听说使用 Angular，您可以使用过滤器任意选择数据源中的哪些项目出现在表单上。实现它！"使用ng-repeat 而不是ng-options 来呈现您的选项，这绝对是正确的。

标签： angularjs ng-options angularjs-ng-options

【解决方案1】：

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

$scope.deliveryAddresses = data;

其中数据是复杂的 Json id、名称和城市，通过 $http.get 从我的 Angular 控制器中的 webapi 接收

我在我的 Html 页面中使用它，并带有以下 sn-p

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

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

希望对某人有所帮助。

【讨论】：

哦，伙计.. 我一直在寻找这个答案 3 天 :D 但我问的问题不正确 :) 现在这真的简化了我的 Angular.. 显然我是一个菜鸟，但至少我可以重构我的代码，这使它更容易和更清洁！谢谢！ :D
'' 匹配除 null 或 undefined 之外的任何原语，因此要过滤非 null 值：filter:{name: ''}

【解决方案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">

【讨论】：

从这个和其他答案来看，我选择重新编写我的代码，以便选择框使用数组作为 ng-options。

【解决方案3】：

您只是在过滤关键字后忘记了“：”。

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

【讨论】：

我第一次尝试上述解决方案时遇到的错误是“不是数组”。当我用数组替换我的字典时，它似乎可以工作，但我会认为这种过滤将是基本功能，也应该适用于字典样式的对象。
ng-optons 和 ng-repeat 与字典样式的对象（使用 myObj 中的语法 (key, value)）很好地配合。但是过滤器似乎是那种数据的问题。如果您不想使用数组，您仍然可以在控制器中预先过滤您的候选字典。
不幸的是，在我的实际生产应用程序中，它需要能够动态更改过滤条件，所以我可能只需要切换到使用数组。
我改用数组，这个解决方案有效。