Solution 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>

In the div below u can use the active element as u like, I am not very sure of this was u were asking, but it was fairly simple.

Problem :

Our team is trying to develop a widget in ServiceNow that is a row of icons and when clicked upon, would open a div revealing helpful links. We want each of the icon clicks to expand the same div, but reveal different links depending on which icon was clicked.

Our code looks like this:

<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])
        }
    }
}

We’ve tried to use bootstrap collapse, but are having issues with the buttons opening the same div. Additionally, how would we access the ng-repeat to generate the list of url links outside of the scope?

Thanks.

Comments

Comment posted by UI Angular Bootstrap Collapse

When you say you tried Bootstrap collapse, did you use an AngularJS aware library like

By