it-swarm.com.de

Wie filtere ich eine Auswahl mit ng-Optionen in Angular?

Ich habe den folgenden Proof-of-Concept einer Angular App geschrieben, mit der eine Person für den Präsidenten der USA stimmen kann.

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

Meine Abstimmungs-App zeigt eine Liste der Kandidatennamen zusammen mit einem Profil für jeden Kandidaten an, das in diesem Fall aus dem Namen und dem Geschlecht des Kandidaten besteht.

Stellen Sie sich für diese Frage vor, dass die Liste der Kandidaten, aus denen Sie auswählen möchten, aus einer entfernten Datenquelle abgerufen wird, aber dasselbe Format wie im Beispiel verwendet wird.

Angenommen, kurz vor der Wahl wird eine Verfassungsänderung verabschiedet, die vorsieht, dass der nächste US-Präsident weiblich sein muss. Angenommen, die Datenquelle kann nicht rechtzeitig zur Wahl aktualisiert werden, und der Chef sagte zu mir: "Ich habe gehört, dass Sie mit Angular mithilfe eines Filters beliebig auswählen können, welche Elemente aus der Datenquelle im Formular angezeigt werden. Machen Sie es geschehen!"

Im Anschluss an einige Beispiele, die ich online gesehen habe, habe ich den obigen Code geschrieben, aber es werden keine Kandidaten mehr angezeigt. Was habe ich falsch gemacht?

Wie kann ich die Optionen in einer Auswahlliste mit einem Angular Filter filtern?

20

filter kann nur auf Arrays ausgeführt werden.

Sie können jedoch einen benutzerdefinierten Filter erstellen:

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

und dann schreibe

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

Sie haben gerade ":" nach dem Filter-Keyword vergessen.

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

vielleicht ein bisschen spät, aber für andere, die nach Informationen suchen, verwende ich diese.

$scope.deliveryAddresses = data; 

Bei komplexen Daten Json-ID, Name und Stadt, die von webapi in meinem Angular controller von $ http.get empfangen wurden

Ich benutze es in meiner HTML-Seite mit dem folgenden Ausschnitt

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

dabei ist die Suche eine Referenz auf ein Textfeld. Einfach und effizient.

Hoffe es hilft jemandem.

18
Han