Angulas JS1 Structural Wood in Table



  • The object should be placed in the table. Fixed investment object, tested:

    1. 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.
    2. The problem with the parent lines has decided to do everything on the diva, but it's on the tables.
    3. 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2