2014-07-22 13 views
7

Ho un metodo nel mio oggetto risorse che entra come:ng-model e ng-options non corrispondono?

resources.type

otherstuff: 'more strings' 
type:'specifictype' 
morestuff: 'morestuff' 

L'utente può modificare questo tipo con una discesa/attraverso un'altra chiamata che ottiene un elenco di tutti i tipi possibili che si presenta come resourceList.types che ha una lista di oggetti come questo jSON

types: 
    [ 
     {name:'resourcetype1'}, 
     {name:'resourcetype2'}, 
     etc... 
    ], 

mio html appare come:

<select ng-model="resources.type" ng-options="name.name for name in resourceList.types"> 
</select> 

La casella di selezione/a discesa popola con il mio oggetto resourceList.type ma quando la pagina viene caricata, il modello -g non viene impostato sul tipo di risorsa già selezionato. In realtà seleziona una voce vuota nella parte superiore del menu a discesa quando si fa clic. È angoloso pignolo su questo? Come posso far sì che il modello ng si comporti nel modo in cui lo voglio?

Ho provato a fare confusione con ng-options con i diversi modi di ottenere la ripetizione, ma sento che questo è più come angolare collega il modello. Abbina semplicemente la stringa alla lista delle opzioni ng?

Ecco il plnkr come si può vedere che non è inadempiente a Type1

http://plnkr.co/edit/NyWACtFQuyndR6CG8lpN?p=info

+0

Mi dispiace avere problemi a capire la tua architettura e qual è il problema. Puoi fornire un Plunker per dimostrare il problema? – JeffryHouser

+0

In poche parole, voglio che qualunque sia il modello di default per l'impostazione del dropdown su qualunque stringa sia presente in resourceList.types in ng-options. Ha senso? – Garuuk

risposta

6

Nel angolare, il modello è l'unica fonte di verità.
Ciò significa che se si desidera un valore selezionato (e legato alla tua ngModel) è necessario assegnare al modello

<select ng-model="resources.type" 
     ng-options="type.name as type.name for type in resourceList.types"> 
</select> 

$scope.resources = {...}; 
$scope.resourceList = { 
    ... 
    types: [ 
     {name: 'resourcetype1'}, 
     {name: 'resourcetype2'}, 
     ... 
    ] 
}; 

// Set the model to the desired value 
$scope.resources.type = $scope.resourceList.types[0].name; 

Sede, anche, questo short demo.

+0

Sì, l'ho provato e si interrompe la vista Ecco il plnkr http://plnkr.co/edit/NyWACtFQuyndR6CG8lpN?p = info – Garuuk

+0

@Garuuk: Hai avuto alcuni errori di battitura nel tuo plunkr e hai anche bisogno di cambiare l'espressione 'ngOptions'. Dai un'occhiata alla mia risposta aggiornata. – gkalpak

+0

Ahh, touche amico mio grazie che funziona. – Garuuk

2

Non è necessario impostare il valore del modello sull'oggetto di riferimento in Elenco risorse. Infatti, la risposta accettata funziona bene senza questa riga:

$scope.resources.type = $scope.resourceList.types[0].name; 

Come funziona? Grazie alla notazione "as" in ngOptions. Senza "come", la corrispondenza viene eseguita sull'elemento di tipo completo, che è un oggetto, quindi la corrispondenza viene eseguita sull'oggetto del riferimento, non sul valore del nome. Con "come" la corrispondenza viene effettuata sulla proprietà dell'elemento, nome.

ho biforcato il plunker: http://plnkr.co/edit/kORfxGdsWBUlFWHXp6Ry?p=preview

1

nel mio caso non ha funzionato dal momento che ngOptions era un array di interi e stavo cercando di impostare ngModal di tipo stringa (2la anno 2014).

la soluzione è semplice: funzione parseInt

Problemi correlati