Lavorare con select usando le opzioni ng di AngularJS

Ho letto su di esso in altri post, ma non riuscivo a capirlo.

Ho un array,

$scope.items = [ {ID: '000001', Title: 'Chicago'}, {ID: '000002', Title: 'New York'}, {ID: '000003', Title: 'Washington'}, ]; 

Voglio renderlo come:

  Chicago New York Washington  

E voglio anche selezionare l’opzione con ID = 000002.

Ho letto select e provato, ma non riesco a capirlo.

    Una cosa da notare è che ngModel è necessario per il funzionamento di ngOptions … si noti ng-model="blah" che sta dicendo “imposta $ scope.blah sul valore selezionato”.

    Prova questo:

      

    Ecco altro dalla documentazione di AngularJS (se non l’hai visto):

    per le origini dati array:

    • etichetta per valore in array
    • seleziona come etichetta per il valore nella matrice
    • etichetta gruppo per gruppo per valore in array = seleziona come etichetta gruppo per gruppo per valore in matrice

    per le origini dati object:

    • etichetta per (chiave, valore) nell’object
    • seleziona come etichetta per (chiave, valore) nell’object
    • etichetta gruppo per gruppo per (chiave, valore) nell’object
    • seleziona come etichetta gruppo per gruppo per (chiave, valore) nell’object

    Per alcuni chiarimenti sui valori dei tag di opzione in AngularJS:

    Quando si utilizzano ng-options , i valori dei tag di opzione scritti da ng-options saranno sempre l’indice della voce dell’array a cui si riferisce il tag dell’opzione . Questo perché AngularJS consente in realtà di selezionare interi oggetti con controlli selezionati e non solo tipi primitivi. Per esempio:

     app.controller('MainCtrl', function($scope) { $scope.items = [ { id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'blah' } ]; }); 
     
    {{selectedItem | json}}

    Quanto sopra ti permetterà di selezionare un intero object in $scope.selectedItem direttamente. Il punto è che, con AngularJS, non devi preoccuparti di cosa c’è nel tuo tag opzionale. Lascia che AngularJS lo gestisca; dovresti solo preoccuparti di ciò che è nel tuo modello nel tuo ambito.

    Ecco un plunker che dimostra il comportamento sopra e mostra l’HTML scritto


    Gestire l’opzione predefinita:

    Ci sono alcune cose che ho omesso di menzionare sopra relative all’opzione predefinita.

    Selezionando la prima opzione e rimuovendo l’opzione vuota:

    Puoi farlo aggiungendo un semplice ng-init che imposta il modello (da ng-model ) al primo elemento negli elementi che stai ripetendo in ng-options :

      

    Nota: questo potrebbe diventare un po ‘folle se foo capita di essere inizializzato correttamente con qualcosa di “falso”. In tal caso, è consigliabile gestire l’inizializzazione di foo nel controller, molto probabilmente.

    Personalizzazione dell’opzione predefinita:

    Questo è un po ‘diverso; qui tutto ciò che devi fare è aggiungere un tag opzione come figlio della tua selezione, con un attributo valore vuoto, quindi personalizzare il suo testo interno:

      

    Nota: in questo caso l’opzione “vuoto” rimarrà lì anche dopo aver selezionato un’opzione diversa. Questo non è il caso per il comportamento predefinito di select in AngularJS.

    Un’opzione predefinita personalizzata che si nasconde dopo aver effettuato una selezione:

    Se si desidera che l’opzione predefinita personalizzata scompaia dopo aver selezionato un valore, è ansible aggiungere un attributo ng-hide all’opzione predefinita:

      

    Sto imparando AngularJS e sono stato alle prese con la selezione. So che questa domanda ha già una risposta, ma volevo condividere ancora un po ‘di codice.

    Nel mio test ho due listbox: marche di auto e modelli di auto. L’elenco dei modelli è disabilitato fino a quando non viene selezionata una marca. Se la selezione in rende la casella di riepilogo viene reimpostata in seguito (impostata su “Seleziona marca”), la casella di riepilogo dei modelli viene nuovamente distriggersta E anche la relativa selezione viene reimpostata (su “Seleziona modello”). I Make vengono recuperati come risorsa mentre i modelli sono solo hardcoded.

    Rende JSON:

     [ {"code": "0", "name": "Select Make"}, {"code": "1", "name": "Acura"}, {"code": "2", "name": "Audi"} ] 

    services.js:

     angular.module('makeServices', ['ngResource']). factory('Make', function($resource){ return $resource('makes.json', {}, { query: {method:'GET', isArray:true} }); }); 

    File HTML:

     
    Make
    Model

    controllers.js:

     function MakeModelCtrl($scope) { $scope.makeNotSelected = true; $scope.make = {selected: "0"}; $scope.makes = Make.query({}, function (makes) { $scope.make = {selected: makes[0].code}; }); $scope.makeChanged = function(selectedMakeCode) { $scope.makeNotSelected = !selectedMakeCode; if ($scope.makeNotSelected) { $scope.model = {selected: "0"}; } }; $scope.models = [ {code:"0", name:"Select Model"}, {code:"1", name:"Model1"}, {code:"2", name:"Model2"} ]; $scope.model = {selected: "0"}; } 

    Per qualche ragione, AngularJS mi consente di confondermi. La loro documentazione è piuttosto orribile su questo. Altri buoni esempi di variazioni sarebbero benvenuti.

    Ad ogni modo, ho una leggera variazione sulla risposta di Ben Lesh.

    Le mie raccolte di dati hanno questo aspetto:

     items = [ { key:"AD",value:"Andorra" } , { key:"AI",value:"Anguilla" } , { key:"AO",value:"Angola" } ...etc.. ] 

    Adesso

      

    ha comunque portato il valore delle opzioni a essere l’indice (0, 1, 2, ecc.).

    Aggiunta di traccia Fissato per me:

      

    Suppongo che capiti più spesso di voler aggiungere una serie di oggetti in un elenco selezionato, quindi lo ricorderò!

    Tieni presente che da AngularJS 1.4 non puoi più usare ng-options, ma devi usare ng-repeat sul tag option:

      

    La domanda ha già una risposta (BTW, risposta veramente buona e completa fornita da Ben), ma vorrei aggiungere un altro elemento per la completezza, che può essere anche molto utile.

    Nell’esempio suggerito da Ben:

      

    è stato utilizzato il seguente modulo ngOptions : select as label for value in array .

    Label è un’espressione, il cui risultato sarà l’etichetta per l’elemento . In tal caso è ansible eseguire determinate concatenazioni di stringhe, in modo da avere etichette di opzioni più complesse.

    Esempi:

    • ng-options="item.ID as item.Title + ' - ' + item.ID for item in items" ti dà etichette come Title - ID
    • ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items" ti dà etichette come Title (X) , dove X è la lunghezza della stringa Title.

    Puoi anche utilizzare i filtri, ad esempio

    • ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items" ti dà etichette come Title (TITLE) , dove Title value of Title property e TITLE è lo stesso valore ma convertito in caratteri maiuscoli.
    • ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items" ti dà etichette come Title (27 Sep 2015) , se il tuo modello ha una proprietà SomeDate

    In CoffeeScript:

     #directive app.directive('select2', -> templateUrl: 'partials/select.html' restrict: 'E' transclude: 1 replace: 1 scope: options: '=' model: '=' link: (scope, el, atr)-> el.bind 'change', -> console.log this.value scope.model = parseInt(this.value) console.log scope scope.$apply() ) 
          

    Sometimes it's much easier to create your own directive...

    Se hai bisogno di un titolo personalizzato per ogni opzione, ng-options non è applicabile. Usa invece ng-repeat con le opzioni:

      

    Spero che quanto segue funzionerà per te.

      

    Può essere utile I collegamenti non funzionano sempre.

      

    Ad esempio, si riempie il modello di origine dell’elenco di opzioni da un servizio REST. Un valore selezionato era noto prima di riempire la lista ed era stato impostato. Dopo aver eseguito la richiesta REST con $ http, l’opzione elenco è terminata.

    Ma l’opzione selezionata non è impostata. Per ragioni sconosciute, AngularJS nell’esecuzione di $ digest in shadow non esegue il binding selezionato come dovrebbe essere. Devo usare jQuery per impostare il selezionato. È importante! AngularJS, in shadow, aggiunge il prefisso al valore del “valore” attr per generato dalle opzioni ng-repeat. Per int è “numero:”.

     $scope.issue.productId = productId; function activate() { $http.get('/product/list') .then(function (response) { $scope.products = response.data; if (productId) { console.log("" + $("#product option").length);//for clarity $timeout(function () { console.log("" + $("#product option").length);//for clarity $('#product').val('number:'+productId); }, 200); } }); }