javascript - 使用 ng-repeat 制作列表，以 "custom categories"分隔(AngularJS)

Question

我需要创建一个列表，其中包含人们将在列表中输入的值，并且我需要按类别分隔显示它们，唯一的问题是我不知道他们将使用哪个类别对于每个元素，因此类别是自定义值。以下是我想要如何显示列表的示例:

Category 1:
- Element 1
- Element 2
- Element 3

Category 2:
- Element 1
- Element 2
- Element 3

Category invented by me:
- Element 1
- Element 2

我尝试使用过滤器对元素进行 ng-repeat 以避免所有重复的类别。然后，我显示类别的标题，并在标题下方显示另一个 ng-repeat，以显示该类别的元素，但使用 ng-if 仅过滤与前一个 ng-repeat 的类别匹配的元素:

<div ng-repeat="x in elements | unique:'Category'">
     <h2>{{x.Category}}</h2>
     <div class="element" ng-repeat="y in elements" ng-if="y.Category === {{x.Category}}">
        <p class="click-text">{{y.Title}}</p>
     </div>
</div>

我知道这很困惑......我需要帮助来寻找实际的解决方案。

<小时/>

这里是元素数组的示例:

[{
  "Category": "Category 1",
  "Title": "Title example",
  "Comments": "Example comments"
},
{
  "Category": "Category 1",
  "Title": "My cat is named George",
  "Comments": "Example comments"
},
{
  "Category": "Category 1",
  "Title": "Hocus pokus",
  "Comments": "Example comments"
},
{
  "Category": "Category 2",
  "Title": "7 projects going LIVE now",
  "Comments": "Example comments"
},
{
  "Category": "Category 2",
  "Title": "Batman vs Superman was a good movie",
  "Comments": "Example comments"
},
{
  "Category": "Category 2",
  "Title": "projects (more)",
  "Comments": "Example comments"
},
{
  "Category": "Category invented by me",
  "Title": "Remember, remember the fifth of november",
  "Comments": "Hello there!"
},
{
  "Category": "Category invented by me",
  "Title": "It's night, electric night",
  "Comments": "General Kenobi"
}]

Answer 1

您可以按对象中的类别对元素进行分组，并按对象属性进行迭代。请参阅 ngRepeat 中的“迭代对象属性”文档。

添加新元素时，也可以将其添加到对象中(在新元素类别旁边的数组中)。

您可以在下面看到一个工作演示(请注意如何在 vm.init 函数中创建从类别到相应元素的映射):

angular
  .module('elementsApp', [])
  .controller('elements', function() {
    var vm = this;
    vm.elements = [{
        "Category": "Category 1",
        "Title": "Title example",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 1",
        "Title": "My cat is named George",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 1",
        "Title": "Hocus pokus",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 2",
        "Title": "7 projects going LIVE now",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 2",
        "Title": "Batman vs Superman was a good movie",
        "Comments": "Example comments"
      },
      {
        "Category": "Category 2",
        "Title": "projects (more)",
        "Comments": "Example comments"
      },
      {
        "Category": "Category invented by me",
        "Title": "Remember, remember the fifth of november",
        "Comments": "Hello there!"
      },
      {
        "Category": "Category invented by me",
        "Title": "It's night, electric night",
        "Comments": "General Kenobi"
      }
    ];
    vm.newElement = {};
    vm.elementGroups = {};

    vm.addElement = function(e) {
      vm.elements.push(e);
      vm.elementGroups[e.Category] = vm.elementGroups[e.Category] || [];
      vm.elementGroups[e.Category].push(e);
      vm.newElement = {};
    };

    vm.init = function() {
      vm.elements.forEach(e => {
        vm.elementGroups[e.Category] = vm.elementGroups[e.Category] || [];
        vm.elementGroups[e.Category].push(e);
      });
    };


  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="elementsApp">
  <div ng-controller="elements as ctrl" ng-init="ctrl.init()">
    <form ng-submit='ctrl.addElement(ctrl.newElement)'>
      <input ng-model="ctrl.newElement.Title" placeholder='Title' required>
      <input ng-model="ctrl.newElement.Category" placeholder='Category' required>
      <button type='submit'>Add</button>
    </form>

    <div ng-repeat="(category, elements) in ctrl.elementGroups">
      <h2>{{category}}</h2>
      <div ng-repeat="element in elements">
        {{element.Title}}
      </div>
    </div>
  </div>
</div>