将值设置为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>