CODEWITHSUNDEEP
angularjsselectangularjs-ng-repeat
user2217057
user2217057

Reputation: 237

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">
                    <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>

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.

Upvotes: 1

Views: 80

Answers (1)

Passersby
Passersby

Reputation: 1182

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:

getUnitListForUnitType(unit.unitType)

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']
};

Upvotes: 1

Related Questions