javascript - 条件分组按ng-repeat

如何在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评估为true时，我也不能只是将dontGroup放在标题行上，因为我需要数据按其他变量（例如var2，var3等）进行排序，并且没有var1分组影响那。

一个fiddle供您玩，同时显示两个所需的功能。

最佳答案

您可以将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