Angularjs：使用 ng-repeat 的可扩展/可折叠 div

Posted 2023-03-24

【中文标题】Angularjs：使用 ng-repeat 的可扩展/可折叠 div

【英文标题】：Angularjs: expandable/collapsible div with ng-repeat

【发布时间】：2020-06-05 07:15:59

【问题描述】：

我们的团队正在尝试在 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])
        
    

我们尝试使用引导折叠，但在打开同一个 div 的按钮时遇到问题。此外，我们如何访问 ng-repeat 以生成范围之外的 url 链接列表？

谢谢。

【问题讨论】：

当您说您尝试过 Bootstrap 崩溃时，您是使用了像 UI Angular Bootstrap Collapse 这样的 AngularJS 感知库，还是尝试将 bootstrap.js 库与 AngularJS 框架混合使用？ bootstrap.js 函数不能很好地与 AngularJS 配合使用，因为它们没有与 AngularJS 框架集成。

【参考方案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 中，你可以随意使用活动元素，我不太确定你问的是这个，但它相当简单。