AngularJS 不同大小和值 select ng-repeat 中的框

Question

我知道问题出在哪里，但到目前为止我尝试解决问题的尝试没有成功。感谢任何帮助。

我正在 ng-repeat 循环中根据 JSON 数据创建 table。 table 列之一代表 select 个框，它们具有不同的值和大小。此 select 语句位于 ng-repeat 块内。

               <tr ng-repeat="unit in unitsData">
                    <td>{{unit.unitName}}</td>
                    <td>{{unit.unitType}}</td>
                    <td>
                        <select class="form-control" ng-model="unit.unit" ng-options="option.value as option.name  for option in getUnitListForUnitType(unit.unitType)"></select>
                    </td>
               </tr>

我收到此错误：[$rootScope:infdig] 已达到 10 次 $digest() 迭代。中止！

根据 Angular select 框的文档，问题来自 getUnitListForUnitType 函数，我在控制器中根据提供的参数创建了 return 不同的列表。不确定如何更正此代码。

Answer 1

问题是 ng-repeat 会为每个项目重新计算，然后它自己再次调用摘要循环，这就是您遇到的错误。

而不是调用：

getUnitListForUnitType(unit.unitType)

您需要以某种方式拥有一个 $scope 变量，例如：

... ng-repeat ... option in unitList[unit.unitType]

你有一个名为 $scope.unitList 的 $scope 变量，它是一个列表列表。当您设置 class 时，只需将该列表列表初始化为一个变量，这就可以解决问题。

$scope.unitList = {
    unit1 : ['item1', 'item2'],
    unit2 : ['item3', 'item4']
};

AngularJS 不同大小和值 select ng-repeat 中的框

AngularJS different size and value select boxes in ng-repeat

select

angularjs

ng-repeat