ng-repeat 显示第一类项目的副标题

Question

我有一个 objects 的列表，除了类型之外，所有字段都相同。我想在呈现此类项目之前在 ng-repeat 中显示一个副标题。现在我有 x ng-repeats 用于 x 类型的项目并且它变得难以管理。除了字幕外，这些块都是一样的。假设范围数组没有分散的类型，它们按其类型细分。例如，渲染时我想展示这个。

渲染

Cats
cat 1
cat 2
cat 3

Dogs
dog 1
dog 2
dog 3

Lizards
lizard 1
lizard 2
lizard 3

型号

$scope.animals = [
  { name: "cat 1", type: "cat" },
  { name: "cat 2", type: "cat" },
  { name: "cat 3", type: "cat" },
  { name: "dog 1", type: "dog" },
  { name: "dog 2", type: "dog" },
  { name: "dog 3", type: "dog" },
  { name: "lizard 1", type: "lizard" },
  { name: "lizard 2", type: "lizard" },
  { name: "lizard 3", type: "lizard" }
];

查看

<div ng-repeat="animal in animals">
  <!-- if first animal type appearing show subtitle -->
  {{animal.name}}
</div>

我不想像现在这样构建我的数据并呈现冗余 ng-repeats。

型号

$scope.cats = [
 ...
];
$scope.dogs = [
 ...
];
$scope.lizards = [
 ...
];

查看

<h2>Cats</h2>
<div ng-repeat="cat in cats">
  {{cat.name}}
</div>

<h2>Dogs</h2>
<div ng-repeat="dog in dogs">
  <h2>Dogs</h2>
  {{dog.name}}
</div>

<h2>Lizards</h2>
<div ng-repeat="lizard in lizards">
  {{lizard.name}}
</div>

提前致谢！

Answer 1

您需要检查类型是否与之前的类型不同。您可以使用 $index - 1

获得此物品

   <div ng-repeat="animal in animals">
      <h1 ng-if="animal.type != animals[$index - 1].type">
        {{ animal.type }}
      </h1>
      {{animal.name}}
    </div>

Answer 2

尝试访问 ng-repeat 循环的前一个元素并将其类型与当前元素的类型进行比较。如果类型不同，则必须显示字幕。

有关如何获取前一个元素的信息，请参阅此question。

ng-repeat 显示第一类项目的副标题

ng-repeat show subtitle for first type of item

angularjs

ng-repeat

angularjs-ng-repeat