折叠图标 - 如果有三个以上的项目，则更改不起作用

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图标改变工作，但另一个没有。日Thnx

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>