Question

如果您查看以下代码，我如何动态区分每个选择下拉列表？

如果选择，所有下拉列表都会显示相同的值。

要求是我想根据响应结构从1到10的选项值（在数组中声明）动态显示3个下拉列表 - 在这种情况下，有三个产品，因此需要显示三个动态下拉列表。

实现这一目标的有效方法是什么？

HTML

    <div ng-controller="MyCtrl">
       <div ng-repeat="product in colors.item">
         <div ng-if="quan!=true">
           <select ng-model="selectedItems.val" ng-init="selectedItems.val = selectedItems.val + ''">
              <option ng-repeat="value in arr | limitTo:quantity">{{value}}</option>  
       </select>
    </div> 
  </div>
<div>
    <a href="#" ng-click="submit(selectedItems.val)">Submit</a>
</div>
</div>

JS

       var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function MyCtrl($scope) {

$scope.colors = {"category": "students"
"item":[
    {
    "product":{
            "name":"abc",
             "age": "24"
    }
    "boo": true
    },
    {
     "product":{
            "name":"def",
             "age": "44"
    }
    },
    {
     "product":{
            "name":"ghi",
             "age": "22"
    }
    }
  ]};
 $scope.quan = false;
 $scope.arr = [];
 for(var a=1; a<=10; a++) { 
    $scope.arr.push(a); 
 }
 $scope.selectedItems = {val : $scope.arr[0]};
 $scope.quantity = 10;
 $scope.submit = function(av){
 alert(av);
 }

});

JSFIDDLE CODE

Answer 1

问题是您的selectedItems 一个，而colors为 array 。

您可以在selectedItems内colors这样：

$scope.colors.map(function(obj) {
  return obj.selectedItems = {
    val: $scope.arr[0]
  }
})

现在，像这样更改<select>：

<select ng-model="product.selectedItems.val" ng-init="product.selectedItems.val = product.selectedItems.val + ''">
    <option ng-repeat="value in arr | limitTo:quantity">{{value}}    
    </option>
</select>

而且，submit就像：

$scope.submit = function() {
  $scope.colors.forEach(function(obj) {
    console.log(obj.selectedItems.val)
  })
}

working fiddle

或者，您可以在$index内使用ng-repeat，使selectedItems分开，而不是colors

Answer 2

为选择元素提供唯一ID，例如id = {{$ index + 1}}，以区分所有选择下拉列表。

Answer 3

代码中的错误很少。您在$ scope.product json中错过了2个逗号。

See updated working fiddle

http://jsfiddle.net/dy1vw7v5/9/

选择值不在ng-repeat中动态迭代

3 个答案: