8

我有我想展示的项目,通常使用 ng-repeat。我想以某种顺序显示(简单),但是每当有序属性发生变化时,我都想要一些 HTML 介于两者之间。

示例:(小提琴):

<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 - 第四

4

2 回答 2

15

您将希望在您的范围内创建一个函数。

$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>
于 2013-04-08T21:33:02.523 回答
1

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

于 2014-01-22T15:56:28.927 回答