Javascript 用ng REPECT列出一个列表，并用“分隔”；自定义类别“；（AngularJS）

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

类别1:
-Element 1
-Element 2
-Element 3

类别2:
-Element 1
-Element 2
-Element 3

我发明的类别：
-Element 1
-Element 2

我尝试使用过滤器对元素进行ng重复，以避免所有重复的类别。然后我显示类别的标题，在标题下方显示另一个ng repeat now以显示该类别的元素，但使用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>

---

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

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

您可以在下面看到一个工作演示（注意如何在

vm.init

函数中创建从类别到相应元素的映射）：

angular
.module（'elementsApp'，[]）
.controller（'元素'，函数（））{
var vm=这个；
vm.elements=[{
“类别”：“类别1”，
“标题”：“标题示例”，
“注释”：“示例注释”
},
{
“类别”：“类别1”，
“头衔”：“我的猫叫乔治”，
“注释”：“示例注释”
},
{
“类别”：“类别1”，
“标题”：“Hocus pokus”，
“注释”：“示例注释”
},
{
“类别”：“类别2”，
“标题”：“7个项目即将上线”，
“注释”：“示例注释”
},
{
“类别”：“类别2”，
“标题”：“蝙蝠侠vs超人是一部好电影”，
“注释”：“示例注释”
},
{
“类别”：“类别2”，
“标题”：“项目（更多）”，
“注释”：“示例注释”
},
{
“类别”：“我发明的类别”，
“标题”：“记住，记住十一月五日”，
“评论”：“你好！”
},
{
“类别”：“我发明的类别”，
“标题”：“这是夜晚，电气之夜”，
“评论”：“克诺比将军”
}
];
vm.newElement={}；
vm.elementGroups={}；
vm.addElement=函数（e）{
元素推送（e）；
vm.elementGroups[e.Category]=vm.elementGroups[e.Category]| |[]；
元素组[e.Category].push（e）；
vm.newElement={}；
};
vm.init=函数（）{
vm.elements.forEach（e=>{
vm.elementGroups[e.Category]=vm.elementGroups[e.Category]| |[]；
元素组[e.Category].push（e）；
});
};
});

添加
{{category}}
{{element.Title}
您可以在对象中按类别对元素进行分组，并按对象属性进行迭代。请参阅文档中的“迭代对象属性”

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

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


angular
.module（'elementsApp'，[]）
.controller（'元素'，函数（））{
var vm=这个；
vm.elements=[{
“类别”：“类别1”，
“标题”：“标题示例”，
“注释”：“示例注释”
},
{
“类别”：“类别1”，
“头衔”：“我的猫叫乔治”，
“注释”：“示例注释”
},
{
“类别”：“类别1”，
“标题”：“Hocus pokus”，
“注释”：“示例注释”
},
{
“类别”：“类别2”，
“标题”：“7个项目即将上线”，
“注释”：“示例注释”
},
{
“类别”：“类别2”，
“标题”：“蝙蝠侠vs超人是一部好电影”，
“注释”：“示例注释”
},
{
“类别”：“类别2”，
“标题”：“项目（更多）”，
“注释”：“示例注释”
},
{
“类别”：“我发明的类别”，
“标题”：“记住，记住十一月五日”，
“评论”：“你好！”
},
{
“类别”：“我发明的类别”，
“标题”：“这是夜晚，电气之夜”，
“评论”：“克诺比将军”
}
];
vm.newElement={}；
vm.elementGroups={}；
vm.addElement=函数（e）{
元素推送（e）；
vm.elementGroups[e.Category]=vm.elementGroups[e.Category]| |[]；
元素组[e.Category].push（e）；
vm.newElement={}；
};
vm.init=函数（）{
vm.elements.forEach（e=>{
vm.elementGroups[e.Category]=vm.elementGroups[e.Category]| |[]；
元素组[e.Category].push（e）；
});
};
});

添加
{{category}}
{{element.Title}
似乎最好在控制器中维护从类别到其各自元素的映射。您能分享一下您的元素数组当前的样子吗？@slider我添加了一个示例arraySeems，似乎最好在控制器中维护从类别到各自元素的映射。您能分享一下您的元素数组当前的样子吗？@slider我添加了一个示例数组
[{
  "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"
}]