角度jsで選択された値を取得

Question

私は新しい角度です。私は選択された現在の値に従って新しい選択を追加するselectのための簡単なデモを作っていました。私はオプションやモデルのためのダイナミックな価値を考えています。私は選択された価値を手に入れることができません。

HTMLコードは、ここに行く：

<md-input-container ng-repeat="a in selects" class="md-block" style="margin-top:20px;"> 
     <label>{{a.label}}</label> 
     <md-select required ng-model="a.model" ng-change="callme()" flex="40"> 
     <md-option ng-model="a.model" ng-repeat="optionValue in a.options" ng-value="optionValue.option"> 
      {{optionValue.option}} 
     </md-option> 
     </md-select> 
     <div class="errors" ng-messages="petApp.favoriteColor.$error"> 
      <div ng-message="required"> You need to select a option</div> 
     </div> 
    </md-input-container> 

JSコードはここにここに

$scope.selects = [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}]; 

$scope.callme = function(){ 
    console.log($scope.pet); 
    $scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}); 
} 

を行く私は$それが未定義与えているscope.petんがモデル名がペットです。

Answer 1

あなたのモデルとしての$ scope.petを使用したい場合、あなたはこのようなNG-モデルディレクティブでそれを使用する必要があります（選択の値が割り当てられますどこNG-モデルがある）

。

<md-input-container ng-repeat="a in selects" class="md-block" style="margin-top:20px;"> 
     <label>{{a.label}}</label> 
     <md-select required ng-model="pet" ng-change="callme()" flex="40"> 
     <md-option ng-repeat="optionValue in a.options" ng-value="optionValue.option"> 
      {{optionValue.option}} 
     </md-option> 
     </md-select> 
     <div class="errors" ng-messages="petApp.favoriteColor.$error"> 
      <div ng-message="required"> You need to select a option</div> 
     </div> 
    </md-input-container> 

はまた、あなたはあなたの$ scope.pet変数がページをレンダリングする前に宣言されていることを確認する必要があります。 $ scope.pet = "Cat";あなたはドロップダウンを事前設定しておくために、$ scope.petに値を割り当てることができます。

あなたのjsのコードは次のようなものになります。あなたはこの自分のNG-モデル値としてa.modelで今表明している

$scope.pet = ""; // or you may assign pet a value if you like 

$scope.selects = [{label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}]; 

$scope.callme = function(){ 
    console.log($scope.pet); 
    $scope.selects.push({label:"Your Pet",model:"pet",options:[{option:"Cat"},{option:"Dog"},{option:"Guinea pig"}]}); 
} 

方法は、角度は、の「モデル」プロパティに値を代入します$ scope.selectsオブジェクト。 $ scope.selects（角度Batarangまたは同様のクロムプラグイン。）配列を調べると、選択した値のオブジェクトのモデルプロパティに表示されますが、間違った場所に割り当てるだけです。

複数の選択とモデルが必要な場合は、既存のオブジェクトモデルのプロパティなどを使用し、モデルのa.modelを変更してからng-changeで "選択肢の "a"。

<md-select required ng-model="a.model" ng-change="callme($index)" flex="40"> 

コールマン関数が呼び出されると、次のようにして選択値が表示されます。

$scope.callme = function(index){ 
    console.log($scope.selects[index].model); 

}