menu a discesa AngularJS (ng- opzioni) non vincolante - stringa all'oggetto (selezione iniziale)

Question

Sto riscontrando un problema nel collegare i dati recuperati dal server a un elenco a discesa. Il problema principale credo sia il fatto che il confronto avvenga su tipi di oggetti diversi.

Ad esempio: 1. L'oggetto restituito dal server contiene una stringa di codice valuta. vogliamo che questo sia legato ad un elemento nell'elenco a discesa

"baseCurrencyCode":"GBP" 

2. Il modello vista restituisce l'elenco delle valute .. Questi vengono restituiti come un elenco di valute oggetti con diverse proprietà

   {"currencies":[{"id":1,"rateId":0,"abbreviation":"AFN","description":"Afghani","rate":0.0,"rateDescription":null,"languageCode":"en-gb","isDefault":true,"fullDescription":"AFN - Afghani - ","shortDescription":"AFN - Afghani"}} 
   

ecc

Attualmente, ho ottenuto questo lavoro scrivendo una funzione per passare attraverso ogni proprietà per ogni elemento in th e lista, trova la proprietà corretta che vogliamo confrontare - fai il confronto e poi restituisci la selezione iniziale.

Quando si chiama il metodo di salvataggio, è necessario associare manualmente l'abbreviazione della valuta all'oggetto che si desidera restituire al server.

Sicuramente ci deve essere un modo migliore per farlo?

Alcuni del mio codice di riferimento ..

<select ng-model="selectedCurrency" ng-options="currency.shortDescription for currency in viewModel.currencies"></select> 

// Call to my custom method..List, PropertyName, value to compare 
$scope.selectedCurrency = InitialiseDropdown($scope.viewModel.currencies, "abbreviation", $scope.updatedObject.baseCurrencyCode); 

// Code executed when saving - to bind the currency to the updated object 
$scope.updatedObject.baseCurrencyCode = $scope.selectedCurrency.abbreviation; 

Ogni aiuto è apprezzato!

EDIT Scusate se non sono stato abbastanza chiaro .. Per riassumere ..

Il problema principale qui è vincolante per la discesa e la selezione iniziale.

L'oggetto che stiamo aggiornando contiene un parametro (stringa) dell'abbreviazione della valuta.

L'elenco da cui selezioniamo è un elenco di oggetti valuta. Poiché si tratta di due tipi di oggetti diversi, non sono stato in grado di collegare il binding a due vie a due e ho scritto del codice per eseguire questa operazione al momento del recupero iniziale e al salvataggio.

Il modo più semplice per risolvere il problema sarebbe quello di restituire un oggetto valuta nel nostro recupero invece di una semplice stringa dell'abbreviazione, ma questa non è un'opzione.

C'è un modo migliore per abilitare il bind a 2 vie su diversi tipi di oggetto?

Grazie ancora

Answer 1

Non è esattamente chiaro quale sia il problema, ma si può risparmiare un po 'di lavoro legando il <select> all'oggetto valuta attualmente selezionato (in modo non c'è bisogno di guardare in su più tardi) .
select + ngOptions permettono di associare ad un valore durante la visualizzazione di un altro, con la seguente sintassi:

<select ng-model="selectedCurrency" 
     ng-options="currency as currency.shortDescription 
        for currency in viewModel.currencies"> 
</select> 

Nell'esempio di cui sopra, $scope.selectedCurrency sarà legato a tutta la currency oggetto, ma currency.shortDescription verrà visualizzato nella cadere in picchiata.

---

Sede, anche, questo short demo.

---

UPDATE:

Nel caso in cui non c'è bisogno di legarsi a tutto l'oggetto di valuta, ma solo legherete updatedObject s' baseCurrencyCode struttura al abbreviazione del selezionato (in discesa) valuta, si può fare in questo modo:

<!-- In the VIEW --> 
<select ng-model="updatedObject.baseCurrencyCode" 
     ng-options="c.abbreviation as c.shortDescription 
        for c in currencies"> 
</select> 

// In the CONTROLLER 
$scope.currencies = [...]; 
$scope.updatedObject = { 
    ... 
    baseCurrencyCode: <baseCurrencyCodeFromServer> 
}; 

---

Sede, anche, che short demo.

Answer 2

Ho avuto lo stesso problema, ng-model e ng-option provenienti da 2 fonti diverse. Il mio modello-ng è associato a un valore in un oggetto json che rappresenta un nome file scelto e la mia opzione-ng è un elenco di valori possibili presi da un file csv.

Nel controllore sto leggendo una directory attraverso un percorso Nodejs, e la creazione di una matrice JSON di nomi di file come questo

var allCsvFiles = [{"name":"file1.csv"},{"name","file2.csv},etc..] 

il file CSV corrente, cioè quello selezionato viene memorizzato in un altro array JSON

[{"date":"01-06-2017","csvfile":"file1.csv","colour":"red"},{...}, etc]. 

stavo usando il seguente codice per la discesa:

<select type="text" ng-model="file.csvfile" 
ng-options="opt.name for opt in allCsvFiles track by opt.name"></select> 

Che ha causato la selezione corrente come vuota e se ho selezionato un elemento dal menu a discesa, ha messo [oggetto], [oggetto] come selezione corrente. Se ho passato il codice ho scoperto che sembrava selezionare {"nome", "file1.csv"} come opzione e non potevo visualizzarlo, questo mi sembrava strano dato che la mia selezione di opzioni ng sembrava dovesse solo tornare il valore di "nome" non la voce dell'array. Ho provato molti modi diversi per fare questo lavoro, ma alla fine ho scoperto che se ho fatto l'elenco delle possibili selezioni una pianura javascript array:

var allCsvFiles = ["file1.csv","file2.csv", "file3,csv] 

e cambiato la selezione per:

<select type="text" ng-model="file.csvfile" ng-options="opt for opt in allCsvFiles"></select> 

poi la discesa la selezione ha funzionato come previsto.

Forse ho mancato qualche altra ovvia soluzione qui, ma poiché la serie di oggetti JSON è di una dimensione, comunque, non sembra essere un problema.

Sembra che la domanda degli OP sia stata risolta, ho solo pensato di aggiungere questo come è stato risolto per me.