javascript - 折叠图标 - 如果超过三个元素，则更改不起作用

Question

我遇到了一个很奇怪的问题。我使用 ng-repeat 显示数据，每个数据都有折叠图标以显示更多。

<div class="list" ng-repeat="(key, value) in lists">
    <a ng-click="collapseIt($index)" data-toggle="collapse" href="{{'#collapseExample' + $index}}" aria-expanded="false" aria-controls="collapseExample" style="cursor: pointer; text-decoration: none">{{key}}
        <span class="fa fa-chevron-right"></span>
        <span class="fa fa-chevron-down"></span>
    </a>
    <div id="{{'collapseExample' + $index}}" class="list" ng-repeat="list in value track by list.id">
        <div ng-if="collapseId==$parent.$index">
            <span>
                <img class="logImg" ng-if="list.priority == 0" src="" alt="success" />
                <img class="logImg" ng-if="list.priority == 1" src="" alt="warning" />
                <img class="logImg" ng-if="list.priority == 2" src="" alt="error" />
            </span>
            <span>
                 <strong>{{list.update_dt}}</strong>
            </span>
            <span>{{list.type}}</span>
            <span>{{list.serial_number}}</span>
        </div>
    </div>
</div>

如果我只有三个元素(日志)，一切正常，但如果我有超过三个元素，可折叠图标更改不起作用。 请看一下jsfiddle

前三个 LOG 图标更改有效，但另一个无效。谢谢

Answer 1

您的代码存在小问题。导致此问题的代码中重复了相同的 ID。

试试这个

<div ng-app="myApp">

  <div class="logBox" style="overflow-y: auto; height: 250px;">
    <div class="list" ng-repeat="(key, value) in lists">

      <a ng-click="collapseIt($index)" data-toggle="collapse" href="{{'#collapseExample' + $index}}" aria-expanded="false" aria-controls="collapseExample{{$index}}" style="cursor: pointer; text-decoration: none">{{key}}
    <span class="fa fa-chevron-right"></span>
    <span class="fa fa-chevron-down"></span></a>

    <div id="{{'collapseExample' + $index}}" >


      <div  class="list" ng-repeat="list in value track by list.id">
        <div ng-if="collapseId==$parent.$index">
         ...
        </div>

      </div> </div>
    </div>

  </div>
</div>