AngularJS different size and value select boxes in ng-repeat

Question

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.

Passersby · Accepted Answer · 2016-09-12 23:05:39Z

1

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

answered Sep 12, 2016 at 23:05

Passersby

1,20210 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2217057 Over a year ago

This is great, let me try to replace the function with a variable, a list of lists.

user2217057 Over a year ago

All worked fine, no errors showing anymore. Appreciate your time and help.

Passersby Over a year ago

Glad I could help!

Collectives™ on Stack Overflow

AngularJS different size and value select boxes in ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related