Javascript 如何使用ng repeat从JSON生成BS accordion？

我有：

$scope.allTags=[
        {id: 1, name: 'name1', description: 'description1', title: 'title1'},
        {id: 2, name: 'name2', description: 'description1', title: 'title1'},
        {id: 3, name: 'name3', description: 'description2', title: 'title2'},
        {id: 4, name: 'name4', description: 'description2', title: 'title2'},
        {id: 5, name: 'name5', description: 'description3', title: 'title3'},
        {id: 6, name: 'name6', description: 'description3', title: 'title3'},
        {id: 7, name: 'name7', description: 'description3', title: 'title3'},
    ];

我需要像这样创作手风琴：

<a data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi1">Title1</a></br>
<div id="col_Iesaukumi1" class="collapse">
    <span>name1</span><span>name2</span>
</div>
<a data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi2">Title2</a></br>
<div id="col_Iesaukumi2" class="collapse">
    <span>name3</span><span>name4</span>
</div><a data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi3">Title3</a></br>
<div id="col_Iesaukumi3" class="collapse">
    <span>name5</span><span>name6</span>span>name7</span>
</div>

    var prev = null;
    var counter = 1;
    for(var i = 0; i < allTags.length; i++){
        if(prev != allTags[i].title){
            if(prev != null){
                html += '</div>';
            }
            html += '<a data-toggle="collapse" data-parent="#tags-accordion" href="#col_collapse'+counter+'">'+allTags[i].title+'</a><a href="#" data-toggle="tooltip" title="'+allTags[i].description+'"><i class="fa fa-info-circle" aria-hidden="true"></i></a></br>';
            html+='<div id="col_collapse'+counter+'" class="collapse">';
            prev = allTags[i].title;
            counter++;
        }
        html += '<span class="tagi" data-type="tags" data-value="'+allTags[i].id+'">'+allTags[i].name+'</span>';
    }
    html += '</div>';

名称1名称2


名称3名称4


名称5名称6跨度>名称7

它要杀了我。我对这项任务不熟悉，也不熟悉。在plain JS中，我做了如下操作：

<a data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi1">Title1</a></br>
<div id="col_Iesaukumi1" class="collapse">
    <span>name1</span><span>name2</span>
</div>
<a data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi2">Title2</a></br>
<div id="col_Iesaukumi2" class="collapse">
    <span>name3</span><span>name4</span>
</div><a data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi3">Title3</a></br>
<div id="col_Iesaukumi3" class="collapse">
    <span>name5</span><span>name6</span>span>name7</span>
</div>

    var prev = null;
    var counter = 1;
    for(var i = 0; i < allTags.length; i++){
        if(prev != allTags[i].title){
            if(prev != null){
                html += '</div>';
            }
            html += '<a data-toggle="collapse" data-parent="#tags-accordion" href="#col_collapse'+counter+'">'+allTags[i].title+'</a><a href="#" data-toggle="tooltip" title="'+allTags[i].description+'"><i class="fa fa-info-circle" aria-hidden="true"></i></a></br>';
            html+='<div id="col_collapse'+counter+'" class="collapse">';
            prev = allTags[i].title;
            counter++;
        }
        html += '<span class="tagi" data-type="tags" data-value="'+allTags[i].id+'">'+allTags[i].name+'</span>';
    }
    html += '</div>';

var-prev=null；
var计数器=1；
对于（var i=0；i

然而，我不明白如何使用这个技术与角度

用这个

<a ng-repeat-start="tag in allTags | unique:'description'" data-toggle="collapse" data-parent="#tags-accordion" href="#col_Iesaukumi{{$index}}">
{{tag.title}}
</a></br>
<div ng-repeat-end id="col_Iesaukumi{{$index}}" class="collapse">
    <span ng-repeat="n in allTags" ng-if="tag.title===n.title">
{{n.name}}
</span>
</div>

{{n.name}

第一个循环在所有唯一的

allTags

上循环，基于它们的描述

第二个内部循环在

allTags

上循环，并获取与外部循环具有相同标题的标记以显示名称

请注意，

$index

在循环中用于区分每个迭代，为每个迭代提供不同的id

我没有测试上面的代码，但逻辑是这样的

编辑

unique

过滤器是angular ui中的一个附加组件

您可以简单地使用如下指令：

<div class="panel panel-default" ng-repeat="tag in allTags track by $index">
  <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{tag.id}}" aria-expanded="false" aria-controls="collapse{{tag.id}}">
        {{tag.title}}        
      </a>
    </h4>
  </div>
  <div id="collapse{{tag.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <p>{{tag.name}}</p>
      <p>{{tag.description}}</p>
    </div>
  </div>
</div>

{{tag.name}

{{tag.description}}

只需将正在制作的模板（“html”变量）保存在html页面本身中，然后像这样使用ng repeat：当然，这正是我要做的。此模板中的逻辑比基本ng重复示例中的逻辑困难得多。在我的纯JS示例中，我检查了标题是否已更改，如果已更改，则关闭上一个div并开始下一个绘图。是否我必须使用一些特殊服务来使用唯一过滤器？我得到错误未知提供程序：UniqueFilter提供我的错误你需要这个角度过滤器的参考检查这个是的，我准备好了。谢谢你，虽然有一个小的语法错误-$index应该是ir{{}乐意帮忙的