Bootstrap Строка таблицы нажмите, чтобы открыть дополнительные кнопки настроек - PullRequest
Новая
       12

Bootstrap Строка таблицы нажмите, чтобы открыть дополнительные кнопки настроек

0 голосов
/ 22 января 2020

У нас есть таблица, которую мы создали с помощью angularjs, и мы хотим добавить опцию для каждой строки либо Редактировать, либо Удалить. Мы действительно хотим что-то похожее на codepen , но без jquery.

Пока у нас есть следующее: 

 <tr ng-repeat="item in data.list | filter:searchTable track by item.sys_id" >
    <td class="moreOption">
      <div class="more" ng-click="c.showHide(item);">
        <div class='moredrop' ng-hide="!item.IsHidden">
          <ul>
            <li>
              <i class='material-icons'>edit</i>
              <span class='label'>Edit</span>
            </li>
            <li>
              <i class='material-icons'>delete</i>
              <span class='label'>Delete</span>
            </li>
          </ul>
        </div>
      </div> 
    </td>
  </tr>

В нашем контроллере клиента у нас есть: 

c.showHide = function(item) {
  item.IsHidden = !item.IsHidden;
}

То, с чем мы действительно боремся, это CSS стилизация всплывающего окна с надписью Редактировать или Удалить. Мы хотим, чтобы при щелчке он «плавал» рядом со значком в 3 вертикальных точки, очень похоже на приведенную выше ссылку на кодовый блок, но, похоже, он не выглядит так. Кроме того, прямо сейчас, когда вы щелкаете по 3 вертикальным точкам для одной строки, а затем щелкаете по другой строке, открывается 2 поля. Что нам нужно сделать в нашем клиентском контроллере за один клик, чтобы закрыть предыдущее всплывающее окно?

1 Ответ

0 голосов
/ 23 января 2020

Почему бы вам не использовать простой Bootstrap выпадающий список?

Выпадающий список: Bootstrap

Используйте собственную кнопку или значок, чтобы запустить раскрывающийся список с этот код. 

$('.dropdown-toggle').dropdown()
...