Angularjs：具有ng-repeat的可扩展/可折叠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折叠，但是在打开同一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中，您可以像使用u一样使用active元素，我不太确定您是否在问这个问题，但这很简单。