將值設置為ng-repeat中生成的下拉列表（ANGULAR.JS）

Question

我試圖重新創建一個真正的問題，所以這個例子可能看起來很奇怪，但它肯定會解決我的問題。 如果你能幫助我，我將不勝感激。

我有一個按鈕，點擊它，它生成3個動態下拉列表（一個名為$ scope.dropdown的變量被饋送，包含$ scope.aAnimals數組的動物列表，目前有3個元素，但在將來可以是“n”元素）。

在此之后，我希望每個下拉列表都有不同的值，例如，第一個下拉列表包含第一個動物，第二個下拉列表具有第二個下拉列表，第三個下拉列表具有第一個下拉列表。 我嘗試過很多東西，但是我無法實現它。

<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>