ui.bootstrap.collapse - по одному свертку для каждой строки в столбце таблицы - открывать только тот щелчок, по которому щелкнули (не все)

Question

Я использую ui-bootstrap.collapse внутри таблицы с динамическими данными из JSON API. Два из нескольких столбцов содержат свернутые части для каждой из своих строк.

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

Та же проблема, когда я пытаюсь снова закрыть партиал - любая из иконок работает (не только та, что в этом частичке).

Я подозреваю, что мне нужно добавить уникальный идентификатор или что-то в этом роде для каждого из партиалов, чтобы сделать один только этот конкретный всплывающий. Но я не могу заставить это работать.

Кто-нибудь может указать мне правильное направление, пожалуйста?

Вот часть моего кода (я заменил динамические данные статическими данными, чтобы сделать их проще:

...
<tbody ng-repeat="url in urls">
    <tr>
      <td>{{url.url}}<span class="pull-right" ng-click="toggleUrl()">&#x25BC;</span></td>
      <td>{{url.title}}</td>
      <td>{{url.traffic}}<span class="pull-right" ng-click="toggleTraffic()">&#x25BC;</span></td>
    </tr>

    <!-- urlCollapsed -->
    <tr collapse="!urlCollapsed">
      <td colspan="4" style="background-color: pink">
      </td>
    </tr>
...

и рабочий поршень со всем кодом: http://plnkr.co/edit/e4UldAFjjIr26Il73C88?p=preview

Answer 1

Вам нужно передать url или какое-то уникальное поле методу toggleUrl(), а затем в методе создать конкретную переменную для каждой частичной икры и сделать их истинными. Соответственно, вы должны будете делать определенные партиалы для каждой обуви соответственно в ng-show. Что-то вроде этого

$scope.toggleUrl = function (url) {
  if (url === '/1') {           
    $scope.url1Collapsed = !$scope.url1Collapsed;
  } else {
    $scope.urlCollapsed = !$scope.urlCollapsed;
  }
};

и на странице

<tr collapse="!url1Collapsed">
    <td colspan="4" style="background-color: pink">partial 1</td>
</tr>
<tr collapse="!urlCollapsed">
    <td colspan="4" style="background-color: pink"> partial 0</td>
</tr>