How to iterate inner array of the object in angularjs?

Question

$scope.radiolabels={
                Name:"",
                type:"radiobtns",
                rbtn:[{
                          Name:"",
                          order:$scope.order
                      }]
                    };

How to iterate objct and its rbtn.I mean in the first div we have to iterate the object and inside that first div we need to iterate the rbtn.I have tried like below.

<ul>


    <li ng-repeat="radiolbs in radiolabels track by $index">
                        RadioButtons {{$index}}: <input type="text" id="ral_{{$index}}" data-ng-model="$parent.radiolabels[$index].Name"/><br>

                                     <div ng-repeat="r in radiolabels.rbtn track by $index">
                                        Option {{$index}}<input type="text" id="rab_{{$index}}"><br>
                                        Option {{$index}}<input type="text" id="rab_{{$index}}"><button class="btn btn-default">+</button>
                                    </div>
                </li>
          </ul>

Its not working

No but i got it by changing the "r in radiolabels.rbtn track by $index" as "r in radiolbs.rbtn track by $index" — Vindya Veer
– Vindya Veer, Commented Oct 30, 2015 at 10:11

Dan Prince · Accepted Answer · 2015-10-30 09:47:43Z

You are trying to iterate over the object in the outer loop. This isn't going to work, because your object isn't in an array.

Iterating over an array is what will give you the $index variable, otherwise you'll just be iterating over key/value pairs.

You probably want to wrap your outer object inside an array.

$scope.radiolabels = [{
  Name: "",
  type: "radiobtns",
  rbtn: [{
    Name: "",
    order: $scope.order
  }]
}];

Then your logic for the inner loop can be fixed by asking for the property on the currently iterated object.

<ul>
  <li ng-repeat="radiolbs in radiolabels track by $index">
    RadioButtons {{$index}}:
    <input type="text" id="ral_{{$index}}" data-ng-model="radiolbs.Name"/><br>

    <div ng-repeat="r in radiolbs.rbtn track by $index">
      Option {{$index}}<input type="text" id="rab_{{$index}}"><br>
      Option {{$index}}<input type="text" id="rab_{{$index}}">
      <button class="btn btn-default">+</button>
    </div>
  </li>
</ul>

Nivs · Accepted Answer · 2015-10-30 11:38:39Z

0

You can try ng-init for this. like:

<ul>
<li ng-repeat="radiolbs in radiolabels" ng-init="dataIndex = $index">
   RadioButtons {{dataIndex }}: <input type="text" id="ral_{{dataIndex}}" data-ng-model="$parent.radiolabels[dataIndex ].Name"/><br> 
</ul>

answered Oct 30, 2015 at 11:38

Nivs

3742 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to iterate inner array of the object in angularjs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related