using ng-repeat inside another ng-repeat

Question

I'm developing a page where I need to show some boxes (using ng-repeat) that contains info of channels and where it will be shown (which are cities).

The problem I am facing is when I repeat the second ng-repeat:

<table class="table table-condensed" ng-init="nitsCh = [objsCh[$index].nit]">

This should get the $index of first ng-repeat and create a new array with the places the channels will be shown. And it does exactly that. But, when I apply the second ng-repeat using this array, it doesn't work properly.

Said that my html looks like this (PS: I need to use the index value instead of objCh.name because I place these boxes into columns)

<div class="box box-solid box-default" ng-repeat="(indexO, objCh) in objsCh track by indexO" ng-if="indexO%4==0 && indexO<=10"> <div class="box-header"> <div class="pull-left"> <img src="dist/img/channels/{{ objsCh[indexO].pic }}" data-toggle="tooltip" title="" data-original-title="Alterar logo do canal"> <h3 class="box-title">{{ objsCh[(indexO)].name }}</h3> </div> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Adicionar ou Remover NIT"><i class="fa fa-plus"></i></button> </div> </div> <div class="box-body"> <table class="table table-condensed" ng-init="nitsCh = [objsCh[indexO].nit]"> <tbody> <tr> <th style="width: 10px">#</th> <th>Nit</th> </tr> <tr ng-repeat="(indexN,nitCh) in nitsCh track by indexN"> <td>{{ objsCh[(indexO + 1)].nit[indexN].num }}</td> <td>{{ objsCh[(indexO + 1)].nit[indexN].name }}</td> </tr> </tbody> </table> </div> </div>

The JS file looks like this:

var app = angular.module('appApp', []); app.controller('ctrlApp', function($scope, $http) { var url = "includes/exibChNit.php"; $http.get(url).success(function(response) { all = response; $scope.objsCh = all.channels; }); });

And the json file (that php create) looks like this:

{ "channels": [{ "id": "1", "sid": "1", "name": "Channel", "pic": "channel.jpg", "crc32": "A1g423423B2", "special": "0", "url": "", "key": "", "type": "", "city": [{ "num": "1", "name": "S�o Paulo" }, { "num": "2", "name": "Rio de Janeiro" }] }, { "id": "2", "sid": "2", "name": "CHannel 1", "pic": "channel.jpg", "crc32": "A1F5534234B2", "special": "0", "url": "", "key": "", "type": "", "city": [{ "num": "1", "name": "S�o Paulo" }, { "num": "2", "name": "Rio de Janeiro" }] }] }

When I try this it works:

<table class="table table-condensed" ng-init="nitsCh = [objsCh[($parent.$index + 1)].nit]">

But I can't make it this way because the json nodes will be dynamic.

Thanks in advance!

Minus 1 for you: for adding an edit that includes my answer of $parent.$index and not mentioning it. — jakeforaker
– jakeforaker, Commented Jul 17, 2015 at 21:55
this is way overcomplicated. Explain what you mean about not being able to use objects themselves due to columns. I've done lots of deep ng-repeat nesting without all the extra indexes you are using — charlietfl
– charlietfl, Commented Jul 17, 2015 at 23:01
Also can use limitTo filter instead of the ng-if="indexO%4==0 && indexO<=10" — charlietfl
– charlietfl, Commented Jul 17, 2015 at 23:05

jakeforaker · Accepted Answer · 2018-09-09 17:02:29Z

41

ng-repeat's create their own $scope.

So, for the inner ng-repeats, you have access to $parent.$index, where $parent is the parent scope of the current repeat block.

For ex:

<ul ng-repeat="section in sections"> <li> {{section.name}} </li> <ul> <li ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials"> {{tutorial.name}} </li> </ul> </ul>

Plunkr http://plnkr.co/edit/hOfAldNevxKzZQlxFfBn?p=preview

(simplified from this answer passing 2 $index values within nested ng-repeat)

edited Sep 9, 2018 at 17:02

answered Jul 17, 2015 at 21:22

jakeforaker

1,6561 gold badge20 silver badges34 bronze badges

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

6 Comments

Bruno Ornelas Over a year ago

Didn't work. I tried to insert it here: <table class="table table-condensed" ng-init="nitsCh = [objsCh[($parent.$index + 1)].nit]"> but if I do it this way it works: <table class="table table-condensed" ng-init="nitsCh = [0,1]">

jakeforaker Over a year ago

Maybe a plunkr would help. Its very hard for me to process your variable names like nitsCh , objsCh, indexN,nitCh

jakeforaker Over a year ago

I took the liberty of doing that for you, please updated plunk: plnkr.co/edit/9IAcPfeZRUJQLF66xVPw?p=preview

jakeforaker Over a year ago

If that still doesn't answer your question, you need to explain what you are trying to do with the ng-init block, because your language is very cryptic.

charlietfl Over a year ago

loadFromMenu should really pass the parent object as argument to make it even simper

|

Collectives™ on Stack Overflow

using ng-repeat inside another ng-repeat

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related