如何使用嵌套的AngularJS ng-repeat使Bootstrap折叠正常工作? [英] How can i make Bootstrap collapse work properly with nested AngularJS ng-repeat?

问题描述

当我单击任何折叠按钮时，它仅适用于由ng-repeat生成的第一个li，我该如何解决此问题，使其仅折叠其父级li?

When i click any of the collapse toggle icons, it only works for the first li generated by the ng-repeat, how can i fix this so it only collapses it's parent li?

$scope.data = [{
  label: 'North America',
  children: [{
    label: 'Canada',
    children: ['Toronto', 'Vancouver']
  }, {
    label: 'USA',
    children: ['New York', 'Los Angeles']
  }, {
    label: 'Mexico',
    children: ['Mexico City', 'Guadalajara']
  }]
}, {
  label: 'South America',
  children: [{
    label: 'Venezuela',
    children: ['Caracas', 'Maracaibo']
  }, {
    label: 'Brazil',
    children: ['Sao Paulo', 'Rio de Janeiro']
  }, {
    label: 'Argentina',
    children: ['Buenos Aires', 'Cordoba']
  }]
}];

<ul class="list-group">
  <li class="list-group-item" ng-repeat="item in data">
    <ul class="collapse in" ng-if="item.children" id="collapse">
      <i class="glyphicon glyphicon-minus pull-right" data-toggle="collapse" data-target="#collapse"></i>
      <i class="glyphicon glyphicon-plus pull-right hidden"></i>
      {{item.label}}
      <li class="list-group-item" ng-repeat="sub in item.children">
        {{sub.label}}
      </li>
    </ul>
  </li>
</ul>

推荐答案

使用$index确保您定位的是唯一ID.因此，请对您的代码进行以下2项更改:

Use $index to ensure you're targeting unique ids. So make the following 2 changes to your code:

• 在内部<ul>标签上的id="collapse{{ $index }}"
• 在第一个<i>标签上，data-target="#collapse{{ $index }}"

• On the inner <ul> tag, id="collapse{{ $index }}"
• On the first <i> tag, data-target="#collapse{{ $index }}"

HTML:

<ul class="list-group">
  <li class="list-group-item" ng-repeat="item in data">
    <ul class="collapse in" ng-if="item.children" id="collapse{{ $index }}">
      <i class="glyphicon glyphicon-minus pull-right" data-toggle="collapse" data-target="#collapse{{ $index }}"></i>
      <i class="glyphicon glyphicon-plus pull-right hidden"></i>
      {{item.label}}
      <li class="list-group-item" ng-repeat="sub in item.children">
        {{sub.label}}
      </li>
    </ul>
  </li>
</ul>

> 示例朋克

这篇关于如何使用嵌套的AngularJS ng-repeat使Bootstrap折叠正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！