Come filtrare una selezione con ng-options in Angular?

Ho scritto il seguente proof-of-concept di un'app Angular che consente a una persona di votare per il Presidente degli Stati Uniti.Come filtrare una selezione con ng-options in 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>

Il mio voto applicazione visualizza un elenco dei nomi dei candidati con un profilo per ciascun candidato, che in questo caso, è costituito da nome e sesso del candidato.

Ai fini di questa domanda, si prega di far finta che l'elenco dei candidati tra cui scegliere sia prelevato da un'origine dati remota, ma seguirà lo stesso formato dell'esempio.

Supponiamo che poco prima dell'elezione si tenga un emendamento costituzionale che stabilisce che il prossimo presidente degli Stati Uniti debba essere di sesso femminile. Supponiamo che la fonte dei dati non possa essere aggiornata in tempo per l'elezione e il capo mi ha detto: "Ho sentito che con Angular, puoi scegliere arbitrariamente quali elementi dall'origine dati compaiono sul modulo usando un filtro. accadere!"

Seguendo alcuni esempi che ho visto on-line, ho scritto il codice sopra, ma non mostra più alcun candidato. Che cosa ho fatto di sbagliato?

Come posso filtrare le opzioni in un elenco di selezione utilizzando un filtro angolare?

fonte

2015-10-22 Daniel Allen Langdon

mancante a: dopo il filtro – Vince

Dopo aver effettuato ulteriori ricerche, sembra che la stessa domanda sia stata posta 2 anni fa: http://stackoverflow.com/questions/14788652. La risposta è che Angular non lo fa, ma penserei che ci debba essere un modo ragionevole. –

"_Sono sentito che con Angular, puoi arbitrariamente scegliere quali elementi dall'origine dati compaiono sul modulo usando un filtro. Fai in modo che succeda! _" Bene se usi 'ng-repeat' invece di' ng-options' per rendere le tue opzioni assolutamente vere. – ryanyuyu

filter può funzionare solo su matrici.

Ma è possibile creare un filtro personalizzato:

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

e poi scrivere

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

fonte

2015-10-22 21:50:31 wero

Giudicando da questa e da altre risposte, ho scelto di rielaborare il mio codice in modo che le caselle di selezione utilizzino le matrici per le opzioni ng. –

Hai appena dimenticato ":" dopo la parola chiave filtro.

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

fonte

2015-10-22 21:22:53

Ancora non funziona –

Cosa succede se si sostituisce (id, persona) solo per persona? Modificherò la mia risposta ... –

L'errore che ho ricevuto quando ho provato la tua soluzione precedente dice "Non array".Quando sostituisco il mio dizionario con un array, sembra funzionare, ma avrei pensato che questo tipo di filtro sarebbe una funzionalità di base che dovrebbe funzionare anche con oggetti in stile dizionario. –

un po 'tardi forse, ma per gli altri alla ricerca di informazioni che sto usando questo.

$scope.deliveryAddresses = data;

Qualora i dati è complessa JSON id, nome e città ha ricevuto dal WebAPI nel mio controller angolare da $ http.get

sto usando nella mia pagina HTML con il seguente frammento

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

dove la ricerca è un riferimento a una casella di testo. Semplice ed efficiente.

Spero che aiuti qualcuno.

fonte

2016-01-29 14:03:53 Han

Oh uomo .. Stavo cercando questa risposta per come 3 giorni: D Ma stavo facendo la domanda sbagliata :) Questo semplifica davvero il mio Angular ora .. chiaramente sono un noob ma almeno posso refactoring il mio codice e questo rende è molto più semplice e pulito! Grazie! : D – ppumkin

Come filtrare una selezione con ng-options in Angular?

risposta

Problemi correlati