web-dev-qa-db-fra.com

Comment filtrer une sélection avec ng-options dans Angular?

J'ai écrit la preuve de concept suivante d'une application Angular qui permet à une personne de voter pour le président des États-Unis.

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

Mon application de vote affiche une liste des noms des candidats ainsi qu'un profil pour chaque candidat, qui dans ce cas, se compose du nom et du sexe du candidat.

Aux fins de cette question, veuillez prétendre que la liste des candidats parmi lesquels choisir est extraite d'une source de données distante, mais suivra le même format que l'exemple.

Supposons que peu de temps avant la tenue des élections, un amendement constitutionnel soit adopté exigeant que le prochain président américain soit une femme. Supposons que la source de données ne puisse pas être mise à jour à temps pour l'élection, et le patron m'a dit: "J'ai entendu qu'avec Angular, vous pouvez choisir arbitrairement les éléments de la source de données qui apparaissent sur le formulaire à l'aide d'un filtre. se produire!"

Suite à quelques exemples que j'ai vus en ligne, j'ai écrit le code ci-dessus, mais il n'affiche plus aucun candidat. Qu'ai-je fait de mal?

Comment puis-je filtrer les options d'une liste de sélection à l'aide d'un filtre Angular?

angularjsng-optionsangularjs-ng-options
20
Daniel Allen Langdon

filter ne peut fonctionner que sur des tableaux.

Mais vous pouvez créer un filtre personnalisé:

ElectionApp.filter('females', [ function() {
    return function (object) {
        var array = [];
        angular.forEach(object, function (person) {
            if (person.gender == 'female')
                array.Push(person);
        });
        return array;
    };
}]);

puis écrire

ng-options="name as person.name for (id, person) in ctrl.candidates | females">
14
wero

Vous venez d'oublier ":" après le mot-clé du filtre.

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

un peu en retard peut-être, mais pour ceux qui recherchent des informations, je l'utilise.

$scope.deliveryAddresses = data;

Lorsque les données sont complexes ID Json, nom et ville reçus de webapi dans mon Angular par $ http.get

Je l'utilise dans ma page Html avec l'extrait de code suivant

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

où la recherche est une référence à une zone de texte. Simple et efficace.

J'espère que cela aide quelqu'un.

18
Han