web-dev-qa-db-fra.com

en utilisant ng-repeat dans un autre ng-repeat

Je suis en train de développer une page où je dois montrer quelques cases (en utilisant ng-repeat) qui contient des informations sur les chaînes et où elles seront affichées (qui sont des villes).

Le problème auquel je suis confronté est lorsque je répète la deuxième ng-repeat:

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

Cela devrait obtenir l'index $ de la première répétition ng et créer un nouveau tableau avec les endroits où les canaux seront affichés. Et c'est exactement cela. Mais, lorsque j'applique la deuxième répétition ng en utilisant ce tableau, cela ne fonctionne pas correctement.

Dit que mon html ressemble à ceci (PS: j'ai besoin d'utiliser la valeur d'index au lieu de objCh.name parce que je place ces cases dans des colonnes)

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

Le fichier JS ressemble à ceci:

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

Et le fichier json (que php crée) ressemble à ceci:

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

Lorsque j'essaie, cela fonctionne:

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

Mais je ne peux pas le faire de cette façon car les nœuds json seront dynamiques.

Merci d'avance!

javascriptangularjsangularjs-ng-repeat
18
Bruno Ornelas

ng-repeat crée son propre $scope.

Donc, pour les répétitions internes de ng, vous avez accès à $parent.$index, où $parent est la portée parent du bloc de répétition actuel.

Par exemple:

<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

(simplifié à partir de cette réponse passage de valeurs d'index de 2 $ dans ng-repeat imbriqué )

36
jakeforaker