代码之家  ›  专栏  ›  技术社区  ›  amallard

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

  •  0
  • amallard  · 技术社区  · 7 年前

    是否可以让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> row实际上有一个按钮,单击后将显示子视图。因此,单击后(在实际显示行之前),我将创建数组,例如:

    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。对吗?但我不知道我还能用这个表结构创建这样的东西。有什么帮助吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   NTP    7 年前

    这是可能的,而且在我看来这不是一个坏主意,例如,如果您的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" ];
          }
    
        }