如何在Angular ng-repeat
指令中应用条件分组?
例如,在下面的代码中,我想要groupBy:'var1'
,但仅当某个变量或表达式dontGroup
的计算结果为true时。我不希望在我的HTML中专门为tr
变量复制底部dontGroup
行,因为无法通过模板加载第二个tr
的信息主表由一个指令控制,在初始化之前需要DOM中的模板。如果我有一种方法可以忽略,请告诉我。我正在使用ng-table
。
<table>
<tr ng-repeat-start="(key, data) in $data | groupBy:'var1'">
<td ng-bind="key">
<!-- Grouped header info here. -->
</td>
</tr>
<tr ng-repeat-end ng-repeat="item in data"> <!-- Repeat $data when `dontGroup` evaluates to true,
otherwise repeat pre-grouped data from the `groupBy` filter above -->
<td ng-bind="item.var2">
<!-- Individual item info here. -->
</td>
</tr>
</table>
因此,我希望较低的ng-repeat
函数仅在$data
求值为true时重复data
为dontGroup
,否则我希望$data
为groupBy
运行ng-if
过滤器,以便数据可以包含该组的标头。
当dontGroup
评估为true时,我也不能只在标题行上删除var2
,因为我需要将数据按其他变量排序,例如var3
,var1
等等,并没有import turtle
positions=[]
while 'x':
count=132
for x in range (132):
count-=1
print(count)
move = randint(1,3)
if move == 1:
turtle.fd(50)
if move == 2:
turtle.rt(90)
turtle.fd(50)
if move == 3:
turtle.lt(90)
turtle.fd(50)
if turtle.xcor()>290:
turtle.rt(180)
turtle.fd(50)
if turtle.xcor()<-290:
turtle.rt(180)
turtle.fd(50)
if turtle.ycor()>240:
turtle.rt(180)
turtle.fd(50)
if turtle.ycor()<-240:
turtle.rt(180)
turtle.fd(50)
turtle.clear()
分组影响那个。
A fiddle可供您展示所需的功能。
答案 0 :(得分:1)
您可以将groupBy设置为引用某个功能,并且您可以在控制器中执行自定义groupBy,以检查如何分组的指示。有关详细信息,请参阅以下文档。
http://ng-table.com/#/grouping/demo-api
这是一个应该展示概念的粗略尝试。
//template
<input type="checkbox" ng-click="clickGroupBY()"/>
<table>
<tr ng-repeat-start="(key, data) in $data | groupBy:valueGroupBY">
//controller
$scope.willgroupby = true;
$scope.valueGroupBY = function(group) {
if($scope.willgroupby) {
return group.var1
}
return group.var2
}
$scope.clickGroupBY = function clickGroupBY() {
$scope.willgroupby = !$scope.willgroupby;
}
<强>更新强>
我使用here带回来的解决方案并将其清理干净。请参阅以下内容:http://jsfiddle.net/r1mss7s0/1/
我还发现这可以提供有关您正在使用的过滤器的信息: https://github.com/a8m/angular-filter/wiki/Common-Questions
答案 1 :(得分:0)
这里我在标题行上设置一个条件,并在dontGroup
求值为true时返回一个虚拟对象。但是,它确实意味着var1
不能等于分组数组中的“test”,否则标题将不会显示。 “test”只是一个受保护的值。
此外,您可以在关闭分组时将此语法与其他过滤器一起使用,如下所示。
<table>
<tr ng-repeat-start="(key, data) in (dontGroup ? {'test': $data} : ($data | groupBy:'var1'))" ng-if="key != 'test'">
<td ng-bind="key">
</td>
</tr>
<tr ng-repeat-end ng-repeat="item in data | orderBy: 'var2')">
<td ng-bind="item.var2">
</td>
</tr>
</table>
检查John Babb的答案,将部分逻辑卸载到控制器中!