Angularでng-optionsで選択をフィルタリングする方法は？

私は米国人の大統領に投票することができる角度アプリの次のような概念証明を書いています。Angularでng-optionsで選択をフィルタリングする方法は？

<!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では、フィルタを使用してフォームに表示されるデータソースのアイテムを任意に選択できると聞いてきました。起こる！ "

私はオンラインで見たいくつかの例に続いて、私は上記のコードを書いていますが、もはや候補を表示しません。私は何を間違えたのですか？

角度フィルタを使用して選択リストのオプションをフィルタリングするにはどうすればよいですか？

出典

2015-10-22 Daniel Allen Langdon

a：フィルタ後 – Vince

さらに調査を行った後、同じ質問が2年前に尋ねられたようです：http://stackoverflow.com/questions/14788652答えはAngularがこれをしないということですが、私はある合理的な方法がなければならないと思います。 –

"Angularでは、フィルタを使ってデータソースからどの項目をフォームに表示するかを任意に選択できます。あなたのオプションを実現することは間違いありません。 – ryanyuyu

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

出典

2015-10-22 21:50:31 wero

これと他の答えから判断して、selectボックスがng-optionsに配列を使用するようにコードを修正することを選択しました。 –

フィルタキーワードの後に "："を忘れてしまった。

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

出典

2015-10-22 21:22:53

まだ動作していません –

（id、person）を人で置き換えるとどうなりますか？私は私の応答を編集します... –

上記のあなたのソリューションを最初に試したときに私が得たエラーは、 "配列ではない"と言います。私の辞書を配列で置き換えると、うまくいくように思えますが、このようなフィルタリングはディクショナリスタイルのオブジェクトでも機能する基本的な機能だと思っていたでしょう。 –

ビットを書きますが、情報を探している他人のために、私はこれを使用しています：

しかし、あなたは、カスタムフィルタを作成することができます。データは、複雑なJSONのID、名前、市は、私は次のスニペット

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

と私のHTMLページにそれを使用しています$ http.get

によって、私の角コントローラでWEBAPIから受信される

$scope.deliveryAddresses = data;

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

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

出典

2016-01-29 14:03:53 Han

オハイオ州..私は3日間のこのような答えを探していた：Dしかし、私は間違った質問をしていた:)これは本当に私の角度を単純化する..明らかに私はnoobですが、少なくとも私は私のコードをリファクタリングすることができますそれはずっと簡単で清潔です。ありがとう！：D – ppumkin

Angularでng-optionsで選択をフィルタリングする方法は？

答えて

関連する問題