ng-repeat 为嵌套的 ng-repeats 动态创建数组

Question

是否可以让 ng-repeat 为嵌套的 ng-repeat 动态创建数组？

我知道这听起来很傻，但我本质上是在寻找这样的东西，希望有人能告诉我这是一个多么糟糕的想法并提出更好的解决方案：

<tbody ng-repeat="row in myRows track by $index">
    <tr>{{row.name}}</tr>
    <tr ng-repeat="subRow in myRows$index>{{subRow.name}}</tr>
</tbody>

所以想法是第一 <tr> 行实际上有一个按钮，单击后将显示子行。所以一旦点击（在它实际显示行之前），我将创建数组，例如：

myRows0 = [{name:"Sub Row A", value:1},
           {name:"Sub Row B", value:2}];

或者如果点击了第二行，我将创建：

myRows1 = [{name:"Sub Row C", value:3},
           {name:"Sub Row D", value:4}];

我假设这样的事情不会起作用，因为 ng-repeat 需要先创建数组，然后才能创建 DOM。那是对的吗？但是我不确定我还能如何使用这个 table 结构来创建这样的东西。有帮助吗？

Answer 1

这是可能的，在我看来这不是一个坏主意，例如，如果您的子行数据很大或者它们是图像，您可能只想在用户点击 displaySubRow 项目时加载您的子行数据，以避免放置给您的服务器带来不必要的负担或让您的用户等待。

工作Plunker

示例代码

html

<table>
      <tbody ng-repeat="item in data" ng-init="item.show = false">
    <tr>
        <td>
            <button ng-show="item.show==false" ng-click="getRowSubItems(item)">Show</button>
            <button ng-show="item.show==true" ng-click="item.show = false">Hide</button>
        </td>
        <td>
          {{item.name}}
        </td>
    </tr>
    <tr ng-show="item.show == true">
      <td>

      </td>
      <td>
          <div ng-repeat="subItem in item.cars">
            {{subItem}}
          </div>
      </td>
    </tr>
</tbody>
</table>

js

  $scope.data = 
    [{"name":"Lex",
      "age":43
    },
    {"name":"Alfred",
      "age":30
    },
    {"name":"Diana",
      "age":35
    },
    {"name":"Bruce",
      "age":27
    },
    {"name":"Oliver",
      "age":32
    }];

    $scope.getRowSubItems = function(item){
      //you can also make a http call to get data from your server
      item.show = true;
      if(item.name == "Lex"){
          $http.get('https://jsonplaceholder.typicode.com/posts/1')
            .then(function(response) {
                item.cars = response.data;
            });
      }
      else{
        item.cars = [ "Ford", "BMW", "Fiat" ];
      }

    }

ng-repeat 为嵌套的 ng-repeats 动态创建数组

ng-repeat dynamically create arrays for nested ng-repeats

angularjs

angularjs-ng-repeat