It is necessary to display the object in the table. Fixed nesting object, tried:

  1. Print everything through the template, describing all levels, but stumble upon the fact that the keys of the arrays are not known, and you need to write new ng-repeat loops inside the parent lines
  2. The problem with the parent lines decided to do everything on the divas, but you need on the tables
  3. We stopped on finding solutions through directives

Tell me where to dig, perhaps there were already 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>

    1 answer 1

    If the structure of the object is rigidly specified, then you can use the plural form of the ng-repeat directive: ng-repeat-start, ng-repeat-end

     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>

    • Thank you, this option is suitable for solving this problem. I would like to find a solution with recursion - Ivan Pak
    • @IvanPak, with what recursion? - Grundy