web-dev-qa-db-fra.com

angularjs: ng-repeat-start et ng-repeat-end avec ng-repeat

Salut, j'ai un cas d'utilisation simple pour ng-repeat-start et end et fonctionne très bien, le problème apparaît lorsque je veux ajouter un ng-repeat interne . Voici le mon code

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>

Le ng-repeat interne dans l'élément td ne fonctionne pas, le commentaire ngRepeat s'affiche lorsque j'inspecte le code source HTML, mais les éléments td ne sont pas créés.

<!-- ngRepeat: e in obj.row -->

Ma solution de contournement moche (étant donné que je connais la taille de ce vecteur) est la suivante:

<tr ng-repeat-start="obj in rows" >
  <td>{{obj.row[0]}}</td>
  <td>{{obj.row[1]}}</td>
  <td>{{obj.row[2]}}</td>
  <td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>
angularjsangularjs-ng-repeat
16
Jime

Je ne sais pas si vous utilisez la version 1.1.6 angulaire ou non, car ng-repeat-start et ng-repeat-end ne sont pas encore disponibles en 1.1.5 ou 1.0.7.

Cependant, vous n'êtes pas obligé d'utiliser les nouvelles directives pour y parvenir. Vous pouvez simplement l'implémenter comme ceci pour le moment:

<table>
    <tbody ng-repeat="obj in rows">
        <tr ng-repeat="e in obj.row">
            <td>{{e}}</td>
        </tr>
        <tr>
            <td colspan="4">{{obj.description}}</td>
        <tr>
    </tbody>
</table>

Vous pouvez utiliser ng-repeat-start et ng-repeat-end pour le réimplémenter lorsque la version d'AngularJS 1.1.6 sera officiellement publiée.

Demo

18
zsong

Je pense que cela pourrait être quelque chose de mal avec votre structure de données. En utilisant Angular 1.2.1 cela fonctionne pour moi

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="h" ng-repeat-start="val in data">{{val.title}}</div>
    <div ng-repeat="con in val.content">
        {{con}}
    </div>
    <div class="b" ng-repeat-end>footer</div>
</div>

Voir jsFiddle

2
NicolasMoise

Vous devriez pouvoir utiliser des itérations basées sur un index pour contourner cela:

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{obj.row[$index]}}</td>
</tr>
<tr ng-repeat-end>
<!-- ... -->
1
Eliran Malka