user2217057 user2217057 - 1 month ago 4x
AngularJS Question

AngularJS different size and value select boxes in ng-repeat

I know where the issue is, but so far my attempts to solve the problem were not successful. Any help is appreciated.

I am creating a table from JSON data in an ng-repeat loop. One of the table columns represents select boxes, which are of different values and sizes. This select statement is inside the ng-repeat block.

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

I am getting this error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Based on Angular documentation for select boxes, the problem comes from getUnitListForUnitType function, which I created in the controller to return different lists based on the provided parameter. Not sure how this code could be corrected.


The issue is that the ng-repeat gets reevaluted for each item, which then itself calls the digest cycle again, which is the error you are getting.

Instead of calling:


You need to somehow have a $scope variable, for example:

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

where you have a $scope variable called $scope.unitList that is a list of lists. When you setup your class just initialize that list of lists to a variable and that should to the trick.

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