如何在 ng-repeat 中分隔组答案

【问题标题】：How to separate groups in ng-repeat如何在 ng-repeat 中分隔组
【发布时间】：2014-01-23 00:04:00
【问题描述】：

我有我想要显示的项目，通常使用 ng-repeat。我想以某种顺序显示（简单），但是每当有序属性发生变化时，我都需要一些 HTML。

示例：(Fiddle)：

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | orderBy:'role'">
        {{item.role}} - {{item.name}}
   </div>
</div>

function Main($scope){
    $scope.items = [{name: 'First', role: 1}, 
                    {name: 'Second', role:2}, 
                    {name: 'Third', role: 1}, 
                    {name: 'Fourth', role: 2}];
    }

我希望它打印出来：

1 - 第一
1 - 第三
（一些分隔符）
2 - 秒
2 - 第四

【问题讨论】：

看看这是否有帮助：stackoverflow.com/a/14076254/215945
@MarkRajcok 谢谢，那行得通。但我不想复制，因为它有很多属性可以订购，而且数据集很大。
如果你有一个巨大的数据集，你不会想在你的 HTML 中使用管道过滤器，我相信this will be evaluated every digest cycle！
@MarkRajcok 这是真的。感谢您的意见。

标签： angularjs

【解决方案1】：

你会想要在你的范围内创建一个函数。

$scope.currentRole = 'something';
$scope.CreateHeader = function(role) {
      showHeader = (role!=$scope.currentRole); 
       $scope.currentRole = role;
      return showHeader;
}

然后在你的 HTML 中：

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | orderBy:'role'">
       <div ng-show="CreateHeader(item.role)">
       something here for the header
      </div>
        {{item.role}} - {{item.name}}

   </div>
</div>

【讨论】：

谢谢，这就行了。我可以通过 ´ng-show="CreateHeader(item.role) && !$first"´ 跳过第一个
我添加了 ..(item.role, $last)。然后当 last==true 我重置 $scope.currentRole。这解决了角色不改变时发生的问题（即，由于重复运行多次，最后一个与隐藏标题的第一个相同）。
这很好用，但是如果我想将每个组包装在一个 html 元素中怎么办？我的第一次尝试是进行双重 CreateHeader 验证以打开和关闭 html 元素，但我认为这不是实现此目的的最佳方法。有什么优雅的解决方法吗？
这对我不起作用。 Angular 刷新了我的列表（出于某种原因）并且我的函数返回了 false，因为 currentRole 是从之前的 ng-repeat 循环中设置的。

【解决方案2】：

@lucuma 的解决方案仅在第一次循环时有效。如果 Angular 刷新列表，变量仍然会从上一个循环中设置。

相反，我在初始化期间向列表中添加了一个新属性（例如，header）：

function Main($scope){
    $scope.items = [{name: 'First', role: 1, header: false}, 
                    {name: 'Second', role:2, header: false}, 
                    {name: 'Third', role: 1, header: true}, 
                    {name: 'Fourth', role: 2, header: false}];
}

然后@lucuma 的 HTML 工作：

<div ng-app ng-controller="Main">
  <div ng-repeat="item in items | orderBy:'role'">
    <div ng-show="item.header">    // <== with this change
      something here for the header
    </div>
    {{item.role}} - {{item.name}}
  </div>
</div>

哦，您可以在初始化时对列表进行一次排序并删除 orderBy 过滤器。

【讨论】：