bootstrap 4手风琴在角度项目中动态加载

Question

我在我的 Angular 项目中使用 bootstrap 4 手风琴。这是我的手风琴

   <div id="accordion" class="accordion">
                        <div class="card mb-0">
                            <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
                                <a class="card-title float-none">
                                   Tank Id
                                </a>
                            </div>
                            <div id="collapseOne" class="collapse" data-parent="#accordion">
                              Tank Description
                            </div>
                            <div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion"
                                href="#collapseTwo">
                                <a class="card-title float-none">
                                    Tank Id
                                </a>
                            </div>
                            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                                Tank Description
                            </div>

                        </div>
                    </div>

目前这运作良好。但现在我需要根据下面的 json 数组加载手风琴头和内容。

    {
"tanks":[
{
"id":"KT025",
"description":"kt025 is large tank with the 3 doors",
 
},
{
"id":"KT023",
"description":"kt023 is medium tank with the 2 doors",
},
{
"id":"KT034",
"description":"kt034 is small tank with the 2 doors",
}
]
}

如果你能帮上忙，我该怎么做？根据我的数据可以吗？

Answer 1

根据您的对象和给定的详细信息，您可以执行此操作。 具体可以参考ng-repeat指令here。

<div ng-app='myApp' ng-controller="Main">
<div ng-repeat="n in object;">
  <div id="accordion" class="accordion" ng-repeat="k in n">
                        <div class="card mb-0">
                            <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
                                <a class="card-title float-none">
                                   Tank Id {{k.id}}
                                </a>
                            </div>
                            <div id="collapseOne" class="collapse" data-parent="#accordion">
                              Tank Description {{k.description}}
                            </div>
                        </div>
                    </div>
</div>
</div>

JS 代码

var myApp = angular.module('myApp', []);
function Main($scope){
  $scope.object =  {
                    "tanks":[
                            {
                            "id":"KT025",
                            "description":"kt025 is large tank with the 3 doors",
                             
                            },
                            {
                            "id":"KT023",
                            "description":"kt023 is medium tank with the 2 doors",
                            },
                            {
                            "id":"KT034",
                            "description":"kt034 is small tank with the 2 doors",
                            }
                            ]
                   }
};