Question

我无法使用嵌套ng-repeat来处理以下数据结构：

options = [{name:"opt1", data:["a","b","c"]}, {name:"op2", data:["d","e","f"]}]

我想要完成的是为每个条目创建一个包含选项的选择标记。

我认为这样的事情应该有效：

<label ng-repeat="option in options">
  <div>{{option.name}}</div>
  <select>
    <option ng-repreat="val in option.data">{{val}}</option>
  </select>
</label>

但只有名称才能正确打印，并且只创建一个没有值的选项。

然后我尝试在内部track by $index中使用ng-repeat：

<label ng-repeat="option in options">
  <div>{{option.name}}</div>
  <select>
    <option ng-repreat="val in option.data track by $index">
      {{option.data[$index]}}
    </option>
  </select>
</label>

但$index似乎是外$index，只有从给定数据的0到1计数。

我做错了什么？

Answer 1

您应该使用ng-options而不是ng-repeat，并且在ng-model的帮助下，您可以获得选定的值。这是一个有效的代码

angular.module("module", []).controller('mainCtr', ['$scope', function($scope){
    $scope.options = [{name:"opt1", data:["a","b","c"]}, {name:"op2", data:["d","e","f"]}];
}]);

<!DOCTYPE html>
<html ng-app="module">

    <head>
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js">    </script>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body ng-controller="mainCtr">
        <div ng-repeat="option in options">
            <div>{{option.name}}</div>
            <select ng-model="opt" ng-options="opt for opt in option.data">
                <option value="">--- select ---</option>
            </select>
        </div>
    </body>
</html>

嵌套的ng-repeat包含包含数组的对象数组

1 个答案: