Question

我正在创建一个显示多个可折叠列表的网站（例如类别和子类别），到目前为止，我已设法使用ng-repeat创建动态div，但我的问题是切换崩溃时。在第二类中，当尝试切换以显示/隐藏列表时，它会切换第一个div上的列表。

HTML：

<div class="col-lg-9 col-sm-3 col-xs-12">
        <div ng-repeat="cat in categories"> 
            <div class="row">
                <div class="col-lg-2 col-sm-3 col-xs-3">
                    <img src="http://placehold.it/75x75" class="img-circle center-block img-responsive" height="75" width="75">
                </div>
            <div class="col-lg-9 col-xs-8">
                <b>
                    {{cat}}
                </b>
            </div>
        </div>
        <hr>

        <div class="row" ng-repeat="item in items ">
            <div class="col-lg-12 col-xs-12"> 
                <p ng-click="toggleCollapse($index + 1)"><i class="fa fa-fw fa-arrow-circle-right"></i>
                    {{item}} 
                </p>
                <div id="collapse{{ $index + 1}}" class="collapse collapse-checklist">
                    <div ng-repeat="c in checklist">
                        <p>Lorem Ipsum</p>
                    </div>

JavaScript的：

$scope.toggleCollapse = function (ind) {
    var collapseInd = ("#collapse" + ind);
    $(collapseInd).collapse('toggle');
};

现在，我已经确定问题是ng-repeat创建具有相同ID的div（折叠 i ），这会导致第二个div上的函数切换第一个div上的列表。

我的功能在第一个 cat div中运行良好，但在所有其他div上，它仍会切换第一个div上的列表。任何人都可以帮我修复我的功能，以便在各自的div上切换列表吗？

Answer 1

试试这个：你可以通过在下一个div元素上调用collapse来避免使用ID。见下面的代码

$scope.toggleCollapse = function (ind) {
    $(this).next('div.collapse.collapse-checklist').collapse('toggle');
};

Answer 2

如果您使用ng-repeat有一些重复ID，则应该像这样使用它：

<tr ng-repeat="(key, value) in data">
  <td> {{key}} </td> <td> {{ value }} </td>
</tr>

所以，现在您将看到key每次都会被更改。并制作一些自定义ID。

<tr ng-repeat="(key, value) in data">
  <td id="myCustomId_{{key}}"> {{key}} </td>
  <td> {{ value }} </td>
</tr>

你将获得一个独特的身份。

此方法列在文档中：http://docs.angularjs.org/api/ng.directive:ngRepeat

Answer 3

正如tudor-gergely所建议的那样。

使用角度方法。

<p ng-click="showChecklist = !showChecklist"><i class="fa fa-fw fa-arrow-circle-right"></i>
                        {{item}}
                    </p>
                <div ng-show="showChecklist">
                    <div ng-repeat="c in checklist">
                        <p>Lorem Ipsum</p>
                    </div>

谢谢！

使用ng-repeat时

3 个答案: