Impossibile compilare la seconda istruzione select

Question

Ho 2 istruzioni select che la prima selezione viene popolata dalla mia prima richiesta di webservice. L'utente seleziona i dati desiderati nella prima selezione, in cui attiverà il metodo onChange per recuperare il primo oggetto selezionato, eseguire nuovamente il servizio web per recuperare un altro set di dati e compilare la seconda istruzione select.

HTML:

<div class="input-label"> 
    Select Kittens: 
</div> 
<select 
ng-model ="options" 
ng-options ="option.name for option in options" 
ng-change="onChange(options)"> 
<option>--</option> 
</select> 
<br> 
<div class="input-label"> 
    Select Age: 
</div> 
<select 
ng-options ="detail.age for detail in details"> 
<option>--</option> 
</select> 

Controller:

.controller("ctrl",['$scope',function($scope){ 
     $scope.options = [ 
      {id:1, name:'typeA'}, 
      {id:2, name:'typeB'}, 
      {id:3, name:'typeC'}, 
      {id:4, name:'typeD'} 
     ] 

      $scope.onChange = function(item){ 
      console.log("Hi world!"); 
      console.log(item); 
      $scope.details = [ 
      {id:1, age:'11'}, 
      {id:2, age:'10'}, 
      {id:3, age:'9'}, 
      {id:4, age:'6'} 
     ] 
    }; 
    }]) 

Issues:

1) Dopo aver selezionato la prima selezione, il valore scompare dalla casella di selezione, ma il valore (oggetto) viene trasferito correttamente alla funzione onChange

2) Impossibile popola la seconda casella di selezione

Ho creato un plunkr per replicare il mio problema (senza il servizio web). Grazie!

Link: http://plnkr.co/edit/tqI0a83PiIHNUkKLj1WF?p=preview

Answer 1

From Docs

La select direttiva viene utilizzato insieme con ngModel per fornire associazione dati tra la portata ed il controllo <select> (compresi valori predefiniti impostazione).

Inoltre è necessario cambiare prima selezionare ng-model come ng-repeat sta succedendo options e ng-model è anche uguale a quello di options, dovrebbe cambiare a someOpetion

Markup

<select ng-model="someOpetion" ng-options="option.name for option in options" ng-change="onChange(options)"> 
    <option>--</option> 
    </select> 
    <br> 
    <div class="input-label"> 
    Select Age: 
    </div> 
    <select ng-options="detail.age for detail in details" ng-model="someDetails"> 
    <option>--</option> 
</select> 

Plunker

Answer 2

uso di questo codice: DEMO

<div class="input-label"> 
    Select Kittens: 
    </div> 
    <select ng-model="name" ng-options="option.name for option in options" ng-change="onChange(name)"> 
    <option>--</option> 
    </select> 

    <br> 

    <div class="input-label"> 
    Select Age: 
    </div> 
    <select ng-model ="age" ng-options="detail.age for detail in details"> 
    <option>--</option> 
    </select> 

Il nome del tuo primo ng-model = "options" ma all'interno del controller si utilizza anche $scope.options come un array di oggetti.

Inoltre, nel secondo <select> non è presente ng-model. Ma ng-options ha bisogno di ng-model.

Answer 3

Ho avuto il tuo problema.

ecco la versione fissa del plunker

Plunker

È necessario aggiungere due scope variabili nel controller per utilizzarli come ng-model.

Il problema per la seconda selezione era non ha l'attributo ng-model. Selezionare deve avere attributo ng-model.