0

我有一个严重的问题。我必须用一些组合数据实现一个表格视图。我必须在表格行中显示一些数据，后面的行必须是有关该行的一些详细信息。不仅如此，用户应该能够隐藏点击该行的详细信息。

例如，模型是某个人的姓名和姓氏。他有孩子，他们的名字必须显示在他名字之后的下一行。根据我的模型，孩子的名字存储在他们父亲的属性中，这是一个与其自身相似的对象数组。孩子不能有其他孩子。

问题是我无法在一次运行 ngRepeat 循环中处理多个表行。我还尝试向 中添加另一个指令，但没有帮助，因为 ng-repeat 的 transclude 设置为“元素”。之后我尝试修改 ng-repeat 指令，几乎达到了效果，但我不得不在指令编译函数的中间创建元素。这是一个非常糟糕的主意，因为代码变得非常脏并且难以支持。

这就是我修改 ng-repeat 指令的方式：（仅显示更改的部分）

if (!last) {
    linker(childScope, function(clone){
        var el = clone; //angular.element(template);
        cursor.after(el);
        if (!childScope.item.innerHidden) {
            for (var i = 0; i < childScope.item.innerItems.length; i++) {
                var innerItem = childScope.item.innerItems[i];
                console.log(innerItem);
                var elem = angular.element('<tr><td>' + innerItem.value1 + '</td><td>' +
                    innerItem.value2 + '</td></tr>');
                el.after(elem);
                el = elem;
            }
        }
        last = {
            scope: childScope,
            element: (cursor = el),
            index: index
        };
        nextOrder.push(value, last);
    });
}

我能做什么？我在想一些可能是 的子级和父级的 html 标签，这可能吗？我可以对其应用 ng-repeat 并管理其中的表格行。或者还有其他有趣的可能性吗？

4

1 回答 1

2

我会将外部 ng-repeat 放在 tbody 标签上。一个表可以包含多个 tbody，它允许您让多行共享同一个对象。对于隐藏子行，有多种选择。我在我的例子中选择了一个简单的。它可能不是最好的，因为它用视图标记污染模型，但它会让你很好地了解如何做到这一点。

假设这是您的模型：

  $scope.family = [
    {
      name : 'Bob',
      age : 34,
      children : [
        {
          name: 'Robert',
          age: 12
        },
        {
          name: 'Paul',
          age: 10
        }
        ],
        show:true
    },
        {
      name : 'Mike',
      age : 23,
      childrens : [],
      show:true
    }
  ]

您会注意到 show 属性。它用于视图行隐藏技巧......正如我所说，你应该找到一个更好的方法来做到这一点。

要显示数据，请使用此表：

  <table>
    <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    </thead>
    <tbody ng-repeat="person in family">
      <tr ng-click="showChildren(person)">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
      </tr>
      <tr class="child" ng-show="person.show" ng-repeat="child in person.children">
        <td>{{child.name}}</td>
        <td>{{child.name}}</td>
      </tr>
    </tbody>
  </table>

您可能会注意到第一个 tr 上的 ng-click 和第二个 tr 上的 ng-show。这就是隐藏嵌套行的神奇之处。只需在您的控制器中添加此方法即可！

  $scope.showChildren  = function(person){
    person.show = !person.show;
  }

无论如何......检查这个plunker......这是一个工作示例。更容易理解！

http://plnkr.co/edit/fO7LWN

于 2013-07-29T01:26:42.017 回答