javascript - ngRepeat 与其他指令结合

Question

我有一个严重的问题。我必须实现一个包含一些组合数据的表格 View 。我必须在表行中显示一些数据，后面的行必须是有关该行的一些详细信息。更重要的是，用户应该能够隐藏单击该行的详细信息。

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

问题是我无法在 ngRepeat 循环的一次运行中处理多个表行。我还尝试向 中添加另一个指令，但没有帮助，因为 ng-repeat 的 transclude 设置为“element”。之后我尝试修改 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 并管理其中的表行。或者还有其他有趣的可能性吗？

Answer 1

我会将外部 ng-repeat 放在 tbody 标签上。一个表可以包含多个 tbody，并且允许多行共享同一个对象。对于隐藏子行，有多种选择。我在示例中选择了一个简单的。它可能不是最好的，因为它用 View 标志污染了模型，但它会给你一个关于如何做到这一点的好主意。

假设这是您的模型:

  $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 属性。它用于 View 行隐藏技巧...正如我所说，您应该找到更好的方法来做到这一点。

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

  <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。这就是隐藏嵌套行的神奇之处。只需在您的 Controller 中添加此方法即可工作!

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

无论如何...检查这个插件...这是一个有效的示例。更容易理解!

http://plnkr.co/edit/fO7LWN