Angularjs:具有ng重复的可扩展/可折叠div

Question

我们的团队正试图在ServiceNow中开发一个小部件，它是一排图标，点击后会打开一个div，显示有用的链接。我们希望每次单击图标都能展开同一个div，但根据单击的图标显示不同的链接。

我们的代码如下：

<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index">
<a href="#">
<i title="{{item.titles}}" class='fa {{item.icon}} fa-3x circle-icon'></i>
</a>
</li>
</ul>
</div>

var schedule_content_tbl = 'sn_cd_content_visibility';
data.hr_connect_links = [];
data.linksArray = [];
data.titles = options.instance_titles.split(',');
data.icon = options.icon.split(',');
for(var i = 0; i < data.titles.length; i++){
data.linksArray.push({
titles: data.titles[i],
icon: data.icon[i],
links:[]
});
}
var scheduleContentGr = new GlideRecord(schedule_content_tbl);
scheduleContentGr.addQuery('sp_instance.title','IN',options.instance_titles);
scheduleContentGr.query();
while(scheduleContentGr.next()){
var content = scheduleContentGr.content.getRefRecord();
var contentLink = content.url_asset.getRefRecord();
data.hr_connect_links.push({
category_title: scheduleContentGr.getDisplayValue('sp_instance'),
link_title: content.getValue('title'),
link_url: contentLink.getValue('url')
});
}
for(var a = 0; a < data.linksArray.length; a++){
for(var b = 0; b < data.hr_connect_links.length; b++){
if(data.linksArray[a].titles==data.hr_connect_links[b].category_title){
data.linksArray[a].links.push(data.hr_connect_links[b])
}
}
}

我们已经尝试过使用bootstrap collapse，但打开同一个div的按钮出现了问题。此外，我们如何访问ng repeat来生成范围外的url链接列表？

谢谢。

Answer 1

<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index"
ng-click="c.activeLink = item">
<a href="#">
<i title="{{item.titles}}" class='fa {{item.icon}} fa-3x circle-icon'></i>
</a>
</li>
</ul>
</div>

<div><!-- Use c.activeLink here as an example-->
<span title="{{c.activeLink.titles}}">
{{c.activeLink.titles}}-{{item.icon}}
</span>
</div>

在下面的div中，你可以随心所欲地使用活动元素，我不太确定这是你问的，但它相当简单。