Как прикрепить раскрывающееся меню uib к строке таблицы?

Question

Как прикрепить раскрывающееся меню uib к строке таблицы?

0

У меня есть раскрывающееся меню uib. Когда пользователи нажимают на строку, она должна отображаться ниже этой строки.

Мое текущее решение (http://plnkr.co/edit/sVdR3CLgi5BFuWl5jxWM) показано ниже таблицы.

Как я могу это изменить?

  <div ng-controller="DropdownCtrl">
    <!-- Simple dropdown -->
    <table class=".table">
      <tr ng-repeat="it in items" ng-click="toggleDropdown($event)">
        <td>
          {{it}}
        </td>
      </tr>
    </table>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

BetaRide 17 авг. 2016, в 08:35

Источник

0

Хорошо, поместите раскрывающийся список внутри ячейки таблицы, а не после таблицы: plnkr.co/edit/sUKkYSgsrTmcfPur6Y7C?p=preview
JB Nizet 17 авг. 2016, в 06:39
0

Этого не происходит здесь, ни в Firefox, ни в Chrome. Какой браузер вы используете?
JB Nizet 17 авг. 2016, в 07:18
0

Это на самом деле работает. Не видел ваш plnkr и имел ошибку в моей попытке. Не стесняйтесь добавлять свой комментарий в качестве полного ответа, чтобы я мог принять его.
BetaRide 17 авг. 2016, в 07:21

Показать ещё 1 комментарий

Теги:

angularjs

angular-ui-bootstrap

1 ответ

Ещё вопросы

Хорошо, поместите раскрывающийся список внутри ячейки таблицы, а не после таблицы: plnkr.co/edit/sUKkYSgsrTmcfPur6Y7C?p=preview
Этого не происходит здесь, ни в Firefox, ни в Chrome. Какой браузер вы используете?
Это на самом деле работает. Не видел ваш plnkr и имел ошибку в моей попытке. Не стесняйтесь добавлять свой комментарий в качестве полного ответа, чтобы я мог принять его.

JB Nizet · Accepted Answer · 2016-08-17T05-48-00.000Z

Вы можете просто добавить выпадающее меню для каждой ячейки, вместо того, чтобы использовать одно раскрывающееся меню после таблицы.

Здесь plunkr показывает вам пример. Основное изменение заключается в перемещении html-кода выпадающего списка внутри <td> и добавлении open элемента к каждому элементу в списке вместо того, чтобы иметь глобальный в области:

  $scope.items = [
    {
      label: 'The first choice!'
    },
    {
      label: 'And another choice for you.'
    },
    {
      label: 'but wait! A third!'
    }
  ];

  $scope.toggled = function(open) {
    $log.log('Dropdown is now: ', open);
  };

  $scope.toggleDropdown = function(it, $event) {
    $event.preventDefault();
    $event.stopPropagation();
    it.isopen = !it.isopen;
  };