Question

我想要显示的项目，通常使用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 - 第三    （某些分隔符kode）
  2 - 秒
  2 - 第四

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

Answer 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过滤器。

如何在ng-repeat中分组

2 个答案: