Angularjs: расширяемый / складной элемент div с повторением ng - PullRequest
Новая
       13

Angularjs: расширяемый / складной элемент div с повторением ng

0 голосов
/ 21 февраля 2020

Наша команда пытается разработать виджет в ServiceNow, представляющий собой ряд значков, и при нажатии на него откроется раздел с полезными ссылками. Мы хотим, чтобы каждый щелчок по значку расширял один и тот же элемент 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-ссылок вне области действия?

Спасибо.

1 Ответ

0 голосов
/ 21 февраля 2020 
<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 вы можете использовать активный элемент как хотите, я не очень уверен в этом, о чем вы спрашивали, но это было довольно просто.

...