Question

如何在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可供您展示所需的功能。

Answer 1

您可以将groupBy设置为引用某个功能，并且您可以在控制器中执行自定义groupBy，以检查如何分组的指示。有关详细信息，请参阅以下文档。

http://ng-table.com/#/grouping/demo-api

这是一个应该展示概念的粗略尝试。

http://jsfiddle.net/wwgo4eo4/

//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

Answer 2

这里我在标题行上设置一个条件，并在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>

Fiddle

检查John Babb的答案，将部分逻辑卸载到控制器中！

有条件的组在ng-repeat中

2 个答案: