Question

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

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

<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需要在创建数组之前创建数组。那是对的吗？但是我不知道我还能用这个表结构创建这样的东西。有什么帮助吗？

Answer 1

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

工作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的数组

1 个答案: