AngularJS mehrere verschachtelte ng-Wiederholungen

ich oft eine verschachtelte ng-Repeat-Schleife durch Kinder Daten getan haben, wenn ich Json wieAngularJS mehrere verschachtelte ng-Wiederholungen

[ 
{ "accountnum": 1, 
    "name": "foo", 
    "subacct": [ 
     { "accountnum": 1-1, 
     "name": "bar" 
     } ... 
    ] 
    } ... 
]

haben und dann verwende ich dieses Muster:

 <tr ng-repeat-start="a in cac.costAccounts"> 
      <td>{{a.first_name}} {{a.last_name}}</td> 
      <td>{{a.account_number}}</td> 
      <td>{{a.description}}</td> 
     </tr> 
     <tr ng-repeat-end ng-repeat-start="sa in a.subacct"> 
      <td>{{sa.first_name}} {{sa.last_name}}</td> 
      <td>{{sa.account_number}}</td> 
      <td>{{sa.description}}</td> 
     </tr>

Das funktioniert. Aber DIESE Zeit die Daten enthalten eine dritte Ebene; Die subacct Objekte haben einen Schlüssel von subsubacct.

[ 
{ "accountnum": 1, 
    "name": "foo", 
    "subacct": [ 
     { "accountnum": 1-1, 
     "name": "bar", 
     "subsubacct": [ 
     { "accountnum": 1-1-1, 
      "name": "bar" 
     } ... 
     } ... 
    ] 
    } ... 
]

Also habe ich versucht, eine dritte Ebene hinzufügen, aber es wird nicht angezeigt (keine Konsole Fehler):

 <tr ng-repeat-start="a in cac.costAccounts"> 
      <td>{{a.first_name}} {{a.last_name}}</td> 
      <td>{{a.account_number}}</td> 
      <td>{{a.description}}</td> 
     </tr> 
     <tr ng-repeat-end ng-repeat-start="sa in a.subacct"> 
      <td>{{sa.first_name}} {{sa.last_name}}</td> 
      <td>{{sa.account_number}}</td> 
      <td>{{sa.description}}</td> 
     </tr> 
     <tr ng-repeat-end ng-repeat="ssa in sa.subsubacct"> 
      <td>{{ssa.first_name}} {{ssa.last_name}}</td> 
      <td>{{ssa.account_number}}</td> 
      <td>{{ssa.description}}</td> 
     </tr>

So wie ich die dritte Schleife bekommen?

Quelle

2017-05-12 Steve

Eine Lösung ist die tbody wie diese wie unten

<tbody ng-repeat="a in cac.costAccounts"> 
    <tr> 
     <td>{{a.first_name}} {{a.last_name}}</td> 
     <td>{{a.account_number}}</td> 
     <td>{{a.description}}</td> 
    </tr> 
    <tr ng-repeat-start="sa in a.subacct"> 
     <td>{{sa.first_name}} {{sa.last_name}}</td> 
     <td>{{sa.account_number}}</td> 
     <td>{{sa.description}}</td> 
    </tr> 
    <tr ng-repeat-end="ssa in sa.subsubacct"> 
     <td>{{ssa.first_name}} {{ssa.last_name}}</td> 
     <td>{{ssa.account_number}}</td> 
     <td>{{ssa.description}}</td> 
    </tr> 
</tbody>

Quelle

2017-05-12 14:10:26

Der Grund Ich versuche, Reihen zu tun ist, so kann ich tun Reihen erweitert, so dass der Benutzer die Detailzeile anzeigen kann. So habe ich es in meiner ursprünglichen Ein-Level-Methode gemacht. – Steve

@Steve Eine Tabelle kann viele tbody-Tags enthalten, so dass Sie in der Lage sein sollten, auch die inneren Zeilen in diesem cenario zu verstecken. Könnten Sie uns einen Plünderer zur Verfügung stellen, und wir können das hier klären? –

Lassen Sie mich dies versuchen. Es funktioniert für die Anzeige der verschachtelten Daten, ich werde versuchen, das Verbergen/Anzeigen zu verdrahten und zu sehen. Vielen Dank. – Steve

Versuchen zu verwenden .. Für tr-Tags funktionieren nicht.

var app = angular.module("myApp",[]); 
 
app.controller('ctrl',['$scope', function($scope){ 
 
    $scope.cac = [{ "accountnum": 1, 
 
    "name": "first repeat", 
 
    "subacct": [{ "accountnum": 1-1, 
 
     "name": "second repeat", 
 
     "subacct": [{ "accountnum": 1-1-1, 
 
      "name": "third repeat", 
 
      "subacct": [{ "accountnum": 1-1-1, 
 
      "name": "fourth repeat"}] }] 
 
     } 
 
    ] 
 
    }]; 
 
    }]);

<html> 
 
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="ctrl"> 
 
<br> 
 

 
    <div ng-repeat="a in cac"> 
 
    <span style="display: table-cell;padding: 3px;border: 1px solid;">{{ a.name }}</span> 
 
    <div ng-include="'test.html'"></div> 
 
</div> 
 

 
<script type="text/ng-template" id="test.html"> 
 
<div ng-repeat="a in a.subacct"> 
 
    <span style="display: table-cell;padding: 3px;border: 1px solid;">{{ a.name }}</span><div ng-include="'test.html'"></div> 
 
</div> 
 
</script> 
 
</body> 
 
</html>

Quelle

2017-05-12 14:46:12

AngularJS mehrere verschachtelte ng-Wiederholungen

Antwort

Verwandte Themen