javascript - 将值设置为 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 ng-model="item.animal" ng-options="opt.animal as opt.animal for opt in aAnimals">
      <option  value="">Select an animal</option>
    </select>
</div>