web-dev-qa-db-ja.com

Angularのng-optionsで選択をフィルタリングするにはどうすればよいですか？

人が米国大統領に投票できるようにする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フィルターを使用して、選択リストのオプションをフィルターするにはどうすればよいですか？

angularjsng-optionsangularjs-ng-options
20
Daniel Allen Langdon

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

フィルタキーワードの後に​​「：」を忘れました。

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

少し遅いかもしれませんが、情報を探している他の人にはこれを使用しています。

$scope.deliveryAddresses = data;

ここで、データは複雑なJson ID、my Angular Controller by $ http.getでwebapiから受信した名前と都市です

次のスニペットでHtmlページで使用しています

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

検索はテキストボックスへの参照です。シンプルで効率的。

それが誰かを助けることを願っています。

18
Han