Angulas JS1 Structural Wood in Table
-
The object should be placed in the table. Fixed investment object, tested:
- Remove everything through the template, describing all levels, but I'm starting to point out that the keys of the masses are not known, and new ng-repeat cycles need to be written inside parent lines.
- The problem with the parent lines has decided to do everything on the diva, but it's on the tables.
- Stop looking for a solution through directives
Tell me where to dig, there may have been similar problems.
angular.module('demo', []) .controller("productsController", function($scope) { $scope.products = { "100":{ "out":{ "id":1,"title":"Apple_1" }, "return":{ "id":2, "title":"Apple_2", "in_sections": { "200":{ "id":3, "title":"Apple_3", "param":"Apple_3_Param", "return_sections":{ "300":{ "id":4, "title":"Apple_4", "param":"Apple_4_Param" } } } } } } }; })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<p>Current</p>
<div ng-app="demo">
<div ng-controller="productsController">
<table border="1">
<tbody ng-repeat="product in products">
<tr ng-repeat="direction in product">
<td>{{ direction.id }}</td>
<td>{{ direction.title }}</td>
<td>-</td>
</tr>
<tr ng-repeat="inSection in product.return.in_sections">
<td>{{ inSection.id }}</td>
<td>{{ inSection.title }}</td>
<td>{{ inSection.param }}</td>
</tr>
<!-- HERE IS PROBLEM cant do ng-repeat unknown array key -->
</tbody>
</table>
</div>
</div><p>Needed</p>
<table border="1">
<tdbody>
<tr>
<td>1</td>
<td>Apple_1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>Apple_2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>Apple_3</td>
<td>Apple_3_Param</td>
</tr>
<tr>
<td>4</td>
<td>Apple_4</td>
<td>Apple_4_Param</td>
</tr>
</tdbody>
</table>
-
If the structure of the facility is rigid, a multiple form can be used https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points
angular.module('demo', []) .controller("productsController", function($scope) { $scope.products = { "100": { "out": { "id": 1, "title": "Apple_1" }, "return": { "id": 2, "title": "Apple_2", "in_sections": { "200": { "id": 3, "title": "Apple_3", "param": "Apple_3_Param", "return_sections": { "300": { "id": 4, "title": "Apple_4", "param": "Apple_4_Param" } } } } } } }; })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<p>Current</p>
<div ng-app="demo">
<div ng-controller="productsController">
<table border="1">
<tbody ng-repeat="product in products">
<tr ng-repeat-start="direction in product">
<td>{{ direction.id }}</td>
<td>{{ direction.title }}</td>
<td>-</td>
</tr>
<tr ng-repeat-start="inSection in direction.in_sections">
<td>{{ inSection.id }}</td>
<td>{{ inSection.title }}</td>
<td>{{ inSection.param }}</td>
</tr>
<tr ng-repeat-end ng-repeat="rsect in inSection.return_sections">
<td>{{ rsect.id }}</td>
<td>{{ rsect.title }}</td>
<td>{{ rsect.param }}</td>
</tr>
<tr ng-repeat-end ng-if="false"></tr>
</tbody>
</table>
</div>
</div><p>Needed</p>
<table border="1">
<tdbody>
<tr>
<td>1</td>
<td>Apple_1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>Apple_2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>Apple_3</td>
<td>Apple_3_Param</td>
</tr>
<tr>
<td>4</td>
<td>Apple_4</td>
<td>Apple_4_Param</td>
</tr>
</tdbody>
</table>