webentwicklung-frage-antwort-db.com.de

anglejs: ng-repeat-start und ng-repeat-end mit innerer ng-repeat

Hallo, ich habe einen einfachen Anwendungsfall für ng-repeat-start und ende und funktioniert einwandfrei. Das Problem tritt auf, wenn ich eine innere ng-repeat hinzufügen möchte. Hier ist der 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>

Das innere ng-repeat im td-Element funktioniert nicht. Ich sehe den ngRepeat-Kommentar, wenn ich den HTML-Quellcode inspiziere, aber die td-Elemente werden nicht erstellt.

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

Mein hässlicher Workaround (vorausgesetzt ich kenne die Größe dieses Vektors) ist:

<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

Ich bin nicht sicher, ob Sie Angular 1.1.6 verwenden oder nicht, da ng-repeat-start und ng-repeat-end in 1.1.5 oder 1.0.7 noch nicht verfügbar sind.

Sie müssen jedoch nicht die neuen Richtlinien verwenden, um dies zu erreichen. Sie können es jetzt einfach so implementieren:

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

Sie können ng-repeat-start und ng-repeat-end verwenden, um es erneut zu implementieren, wenn AngularJS 1.1.6 offiziell freigegeben wird.

Demo

18
zsong

Ich denke, es könnte etwas an Ihrer Datenstruktur sein. Mit Angular 1.2.1 funktioniert das für mich

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

Siehe jsFiddle

2
NicolasMoise

Sie sollten indexbasierte Iterationen verwenden können, um das zu umgehen:

<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