Question

我正在浏览一组引用记录ng-repeat，如下所示：

<div ng-repeat="quote in quotes">
    <h3>{{quote.chaptertitle}}</h3>
    <div>"{{quote.body}}"</div>
</div>

每章有很多引号，当然我只想在显示记录时第一次显示章节标题。

这样做的最佳方法是什么，例如在范围内创建一个保留变量，然后使用ng-if进行检查，或者使用ng-repeat还有另一种更简单的方法吗？

Answer 1

你确实可以使用ng-if：

<h3 ng-if="quote.chaptertitle != quotes[$index-1].chaptertitle">{{quote.chaptertitle}}</h3>

我个人更喜欢首先使用嵌套结构（章节 - ＆gt;引用）。其他人建议的现有分组解决方案也很好。

Answer 2

您可能希望按chaptertitle

对报价进行分组

<div ng-repeat="(key, value) in quotes | groupBy: 'chaptertitle'">
    <h3>{{ key }}</h3>
    <div ng-repeat="quote in value">
        "{{quote.body}}"
    </div>
</div>

更新： groupBy过滤器来自https://github.com/a8m/angular-filter，此处托管http://cdnjs.com/libraries/angular-filter

Plunker

Answer 3

您可以更改引号数组，这样如果标题相同，则将其设置为undefined：

var chapterTitle;
for (var i = 0; i < $scope.quotes.length; i++) {
    var quote = $scope.quotes[i];
    if (quote.chaptertitle !== chapterTitle) {
      chapterTitle = quote.chaptertitle
    }
    else {
      quote.chaptertitle = undefined;
    }
}

然后在您的视图中，您可以在h3上使用ng-if：

<div ng-repeat="quote in quotes">
  <h3 ng-if="quote.chaptertitle != undefined">{{quote.chaptertitle}}</h3>
  <div>"{{quote.body}}"</div>
</div>

Plunkr

但通常我会改变我的数据结构（在后端），所以它会是这样的：

$scope.chapters = [
    {
        title: 'one',
        quotes: [
            {
                body: 'body1'
            },
            {
                body: 'body2'
            }
        ]
    },
    {
        title: 'two',
        quotes: [
            {
                body: 'body3'
            },
            {
                body: 'body4'
            }
        ]
    }
];

然后你会使用嵌套重复：

<div>
  <h3 ng-repeat-start="chapter in chapters">{{chapter.title}}</h3>
  <div ng-repeat="quote in chapter.quotes" ng-repeat-end>"{{quote.body}}"</div>
</div>

Answer 4

您可以使用当前索引并与之前的记录进行比较。使用你的HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="quote in quotes">
         <h3 ng-hide="equalPrevious($index)">{{quote.chaptertitle}}</h3>
        <div>"{{quote.body}}"</div>
    </div>
</div>

使用以下控制器

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.quotes = [
      { chaptertitle: 'Hello', body: '1' },
      { chaptertitle: 'Hello', body: '2' },
      { chaptertitle: 'Hello1', body: '3' }
    ];

    $scope.equalPrevious = function(index) {
        return index != 0 &&
            $scope.quotes[index].chaptertitle == $scope.quotes[index -1].chaptertitle;
    };
}

运行时会显示以下结果（和jsfiddle）

您好
＆＃34; 1＆＃34;
＆＃34; 2＆＃34;
Hello1
＆＃34; 3＆＃34;

如何仅在使用ng-repeat时更改字段时显示字段？

4 个答案: