w3schools example drop down javascript angularjs angularjs-ng-repeat

javascript - drop - ng-repeat example



usando ng-repetir dentro de otra ng-repetir (1)

ng-repeat ''s crea su propio $scope .

Por lo tanto, para las repeticiones internas ng, tiene acceso a $parent.$index , donde $parent es el alcance principal del bloque de repetición actual.

Por ejemplo:

<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

(simplificado de esta respuesta pasando 2 $ valores de índice dentro de ng-repetir anidados )

Estoy desarrollando una página en la que necesito mostrar algunos cuadros (con ng-repeat ) que contienen información de canales y dónde se mostrará (que son ciudades).

El problema al que me enfrento es cuando repito la segunda ng-repeat :

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

Esto debería obtener el índice $ de la primera repetición ng y crear una nueva matriz con los lugares donde se mostrarán los canales. Y hace exactamente eso. Pero, cuando aplico la segunda repetición ng usando esta matriz, no funciona correctamente.

Dijo que mi html tiene este aspecto (PS: necesito usar el valor del índice en lugar de objCh.name porque objCh.name estos cuadros en columnas)

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

El archivo JS se ve así:

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; }); });

Y el archivo json (que php crea) se ve así:

{ "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" }] }] }

Cuando intento esto funciona:

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

Pero no puedo hacerlo de esta manera porque los nodos json serán dinámicos.

¡Gracias por adelantado!