Javascript ng repeat中的条件groupBy

如何在Angular

ng repeat

指令中应用条件分组

例如，在下面的代码中，我希望

groupBy:'var1'

，但仅当某个变量或表达式

dontGroup

的计算结果为true时。我不想专门为HTML中的

dontGroup

变量复制底部的

tr

行，因为由于主表由指令控制，并且在初始化之前需要DOM中的模板，因此第二次

tr

无法通过模板加载信息。如果有什么方法我忽略了，请告诉我。我正在使用

ng表

<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

函数仅在

dontGroup

计算为true时才将

$data

作为

data

重复，否则我希望

$data

通过

groupBy

过滤器运行，以便数据可以具有组的标题

当

dontGroup

的计算结果为true时，我也不能只在标题行中放置

ng if

，因为我需要数据按其他变量排序，例如

var2

，

var3

，而

var1

分组不会影响这一点

---

A供您使用，以显示所需的两个功能。

这里我在标题行上设置一个条件，并在

dontGroup

计算结果为true时返回一个虚拟对象。但是，这确实意味着

var1

不能等于分组数组中的“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的答案，将部分逻辑卸载到控制器中

---

您可以将groupBy设置为引用函数，并在控制器中执行自定义groupBy，以检查如何分组的指示器。有关更多信息，请参阅以下文档

下面是一个粗略的尝试，应该可以说明这个概念

//模板
//控制器
$scope.willgroupby=true；
$scope.valueGroupBY=函数（组）{
如果（$scope.willgroupby）{
返回组.var1
}
返回组.var2
}
$scope.clickGroupBY=函数clickGroupBY（）{
$scope.willgroupby=！$scope.willgroupby；
}

更新

我带着你带回来的解决方案跑过去，把它清理干净了。见下文：

我还发现这对您正在使用的过滤器有一定的帮助：

---

但是，当

dontGroup

的计算结果为true时，我根本不想分组。我可能想按任意数量的变量进行排序。对于除

var

之外的任何变量，我不需要标题。这有意义吗？是的，这在模板中更干净，并将其卸载到控制器。您可能希望在if='key！=“”以确保未显示第一个标头，但随后保护值为空，而您可能需要一个空的

var1

值，因此查看此解决方案的用户应将其更改为自己的保护值。在这一点上我会投你一票，但因为你使用的是控制器，我的答案可能对大多数人更有吸引力，因为他们不必为一件事管理两个代码集。

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