ngRepeat与其他指令结合

我有一个严重的问题。我必须必须实现与一些组合数据的表视图。我必须在表格行中显示一些数据，以下行必须是关于此行的一些细节。更重要的是，用户应该能够隐藏点击该行的细节。ngRepeat与其他指令结合

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

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

我这是怎么修改的NG-重复指令：（只显示部分变更）

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并管理其中的表格行。或者还有其他有趣的可能性吗？

来源

2013-07-28 Aurora

为什么不通过该扩展可见孩子在其输入到输出不同的元素父母自定义过滤器添加到您的NG-重复表达？ – lossleader

我会将外部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 
    } 
    ]

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

要显示的数据，使用该表：

<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和第二TR的NG-秀NG点击。这就是魔法隐藏嵌套行的地方。只需在控制器中添加此方法即可使用！

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

无论如何...检查这个活塞...这是一个工作的例子。更容易理解！

http://plnkr.co/edit/fO7LWN

来源

2013-07-29 01:26:42 Galdo

ngRepeat与其他指令结合

回答

相关问题