Nested ng-repeat with array of objects which contain arrays

Question

I can't get nested ng-repeat to work for a data-structure like the following:

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

What I'm trying to accomplish is creating a select tag for each entry with options in it.

I thought that something like this should work:

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

but only the name is name is printed properly and only one option with no value in it is created.

Then I tried using track by $index in the inner 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>

but $index appears to be the outer $index and only counts from 0 to 1 with the given data.

What am I doing wrong?

@Chandermani that's embarassing^^ now it works :) Thank you! — Tobi
– Tobi, Commented Dec 25, 2014 at 13:14
<select ng-options="val for val in option.data"></select> should work, right? Because it's not^^ — Tobi
– Tobi, Commented Dec 25, 2014 at 13:25

Vaibhav Raut · Accepted Answer · 2014-12-25 14:24:54Z

3

you should use ng-options instead of ng-repeat and with the help of ng-model you can get selected value. Here is a working code

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>

answered Dec 25, 2014 at 14:24

Vaibhav Raut

4724 silver badges12 bronze badges

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

1 Comment

Experimenter Over a year ago

Cool! Thanks for the answer, but how can you get both array of options in one select, not two but one. Is it possible through html binding or better to prepare the new array in the controller? Thanks : )

Collectives™ on Stack Overflow

Nested ng-repeat with array of objects which contain arrays

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related