Question

我有一个对象列表，除了类型之外，它们具有所有相同的字段。我想在渲染这种类型的项目之前在ng-repeat中显示一个副标题。现在我对x种类的物品进行了x ng-repeats，它变得难以管理。除了字幕外，这些块都是相同的。假设范围数组没有分散的类型，它们会根据其类型进行细分。例如，渲染时我想表明这一点。

渲染

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显示第一类项目的字幕

2 个答案: