は、ng-repeat（ANGULAR.JS）で生成されたドロップダウンに値を設定します。

Question

実際の問題を再現しようとしています。この例は奇妙に見えるかもしれませんが、 私を助けることができれば感謝します。

ボタンをクリックすると、3つの動的なドロップダウンが生成されます（$ scope.aAnimals配列を含む動物のリストとともに、$ scope.dropdownという変数が与えられ、現在3つの要素があります）しかし将来的には "n"要素となりうる）。

これ以降、最初のドロップダウンには最初の動物が、2番目のドロップダウンには2番目に、3番目のドロップダウンにはそれぞれ異なる値が設定されます。 私は多くのことを試みましたが、私はそれを達成することができませんでした。

<div ng-repeat='item in dropdown'> 
    <select class="form-control animal" ng-model='MyAnimals' id='animal{{$index}}' name='animal{{$index}}' 
    ng-options="opt as opt.animal for opt in aAnimals track by opt.animal"> 
      <option style="display:none" value="">Select an animal</option> 
    </select> 
</div> 
<button ng-click='add()' >generate</button> 


$scope.obj = {} 
$scope.aAnimals= 
[ 
{ "animal": "cat"}, //first dropdown 
{ "animal": "dog"}, //second dropdown 
{ "animal": "parrot"} //third dropdown 
] 


$scope.add=function(){ 
$scope.dropdown=[]; 
for(var i in $scope.aAnimals){ 
    $scope.dropdown.push({ "animal": $scope.aAnimals[i].animal }) 
    //$('.animal')[i].value=$scope.aAnimals[i].animal; 
    } 
} 

これは結果..

{ "animal": "cat"}, //first dropdown 
{ "animal": "dog"}, //second dropdown 
{ "animal": "parrot"} //third dropdown 

でなければならないすべての動物は、すべてのドロップダウンに表示され続けます。重要なのは、画像の結果を得ることです。

http://plnkr.co/edit/JF1PBblo6VGKdeWvoqTz?p=preview

Answer 1

あなたは使用することができます

<div ng-repeat='item in dropdown'> 
<select class="form-control animal" ng-model='item' id='animal{{$index}}' name='animal{{$index}}' ng-options="opt as opt.animal for opt in aAnimals" > 
     <option value="">Select an animal</option> 
</select> 

Answer 2

あなたは次のように使用することができます - これは役立つ

<div ng-repeat="item in dropdown"> 
    <select ng-model="item.animal" ng-options="opt.animal as opt.animal for opt in aAnimals"> 
     <option value="">Select an animal</option> 
    </select> 
</div> 

Answer 3

希望：

<div ng-repeat='item in aAnimals'> 
    <select ng-model="item.animal" ng-options="opt.animal as opt.animal for opt in dropdownw"></select> 
</div>