2番目のselect文を設定できません

Question

最初の選択に2番目のselect文が含まれています。ユーザーは最初の選択で目的のデータを選択し、onChangeメソッドをトリガして最初の選択オブジェクトを取得し、Webサービスを再度実行して別のデータセットを取得し、2番目の選択文を入力します。

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("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'} 
     ] 
    }; 
    }]) 

問題：

1）第一の選択を選択した後、値がちょうど選択ボックスから消えますが、値（オブジェクト）がonChange関数に正常に渡される

2）できない

私の問題（webserviceなし）を複製するplunkrを作成しました。ありがとう！

リンク： http://plnkr.co/edit/tqI0a83PiIHNUkKLj1WF?p=preview

Answer 1

From Docs

選択指令は データバインディングスコープ及び（ 設定のデフォルト値を含む）<select>コントロール間を提供するngModelと一緒に使用されます。あなたはng-repeatとして第一選択ng-modelがoptionsとng-modelに起こっている変更する必要がさらに

someOpetion

マークアップ

<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にそれを変更する必要があり、また、optionsのものと同じです

Answer 2

使用このコード：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> 

ng-model = "options"あなたの最初の名前が、コントローラ内部であなたは、オブジェクトの配列として$scope.optionsを使用しています。

さらに、<select>にはng-modelがありません。しかし、ng-optionsはng-modelが必要です。

Answer 3

問題が発生しました。

は、ここでは、あなたのng-modelとしてこれらを使用するようにコントローラに2つのscope変数を追加する必要があり、あなたのplunker

Plunker

の修正バージョンです。

2番目の選択の問題は、です。ng-modelという属性はではありません。選択にはng-model属性が必要です。