數據與ng-repeat切換

Question

我在頁面中有一個表格結構，每行都以ng-repeat的形式出現。點擊按鈕我也有一個data-toggle="collapse" data-target="#status0"屬性。這些按鈕也是ng-repeat div的一部分。我面臨的問題是，如果我點擊按鈕，在第3行第4列中，它仍然顯示第1行第4列中的可摺疊div。這是可摺疊的div始終出現在第一排。我無法調試如何得到這個工作。

我的HTML代碼如下所示：

<tbody ng-repeat="group in groups"> 
      <tr> 
      <td rowspan="{{group.rowLength}}" ng-hide="$index>=0"></td> 

      <td>{{group.serviceName}}</td> 
      <td> 
       <div class={{group.colorMe[0]}}>{{group.env1}}</div> 
       <button class="btn btn-info" ng-controller="group.funcName" ng-click="sanity(group.serviceName , 'env1', group.colorMe[0], group.id)">Sanity</button> 
       <button ng-class= "{'success':group.testsRun[0]==='Success', 'progress':group.testsRun[0]!='Success' && group.testsRun[0]!='failed', 'failed':group.testsRun[0]==='failed'}" ng-show="group.clicked[0]" data-toggle="collapse" data-target="#status0">{{group.testsRun[0]}}</button> 
       <div id="status0" class="collapse"> 
        <p background-color: "#39D1B4" color: "#fff"> 
         The tests which failed are : {{group.showResults[0]}}. 
         For more info, visit <a href="https://www.google.com" target="_blank">Google</a>. 
        </p> 
       </div> 
      </td> 
      <td> 
       <div class={{group.colorMe[1]}}>{{group.env2}}</div> 
       <button class="btn btn-info" ng-controller="group.funcName" ng-click="sanity(group.serviceName , 'env2', group.colorMe[1], group.id)">Sanity</button> 
       <button ng-class= "{'success':group.testsRun[1]==='Success', 'progress':group.testsRun[1]!='Success' && group.testsRun[1]!='failed', 'failed':group.testsRun[1]==='failed'}" ng-show="group.clicked[1]" data-toggle="collapse" data-target="#status1">{{group.testsRun[1]}}</button> 
       <div id="status1" class="collapse"> 
        <p background-color: "#39D1B4" color: "#fff">The tests which failed are : {{group.showResults[1]}}. For more info, visit <a href="https://google.com" target="_blank">Google</a></p> 
       </div> 
      </td> 
      <td> 
       <div class={{group.colorMe[2]}}>{{group.env3}}</div> 
       <button class="btn btn-info" ng-controller="group.funcName" ng-click="sanity(group.serviceName , 'env3', group.colorMe[2], group.id)">Sanity</button> 
       <button ng-class= "{'success':group.testsRun[2]==='Success', 'progress':group.testsRun[2]!='Success' && group.testsRun[2]!='failed', 'failed':group.testsRun[2]==='failed'}" ng-show="group.clicked[2]" data-toggle="collapse" data-target="#status2">{{group.testsRun[2]}}</button> 
       <div id="status2" class="collapse"> 
        <p background-color: "#39D1B4" color: "#fff">The tests which failed are : {{group.showResults[2]}}. For more info, visit <a href="https://google.com" target="_blank">Google</a></p> 
       </div> 
      </td> 
      <td> 
       <div class={{group.colorMe[3]}}>{{group.env4}}</div> 
       <button class="btn btn-info" ng-controller="group.funcName" ng-click="sanity(group.serviceName , 'env4', group.colorMe[3], group.id)">Sanity</button> 
       <button ng-class= "{'success':group.testsRun[3]==='Success', 'progress':group.testsRun[3]!='Success' && group.testsRun[3]!='failed', 'failed':group.testsRun[3]==='failed'}" ng-show="group.clicked[3]" data-toggle="collapse" data-target="#status3">{{group.testsRun[3]}}</button> 
       <div id="status3" class="collapse"> 
        <p background-color: "#39D1B4" color: "#fff">The tests which failed are : {{group.showResults[3]}}. For more info, visit <a href="https://google.com" target="_blank">Google</a></p> 
       </div> 
      </td> 

的$ scope.groups看起來是這樣的：

$scope.groups=[]; 
    var services = [ser1, ser2, ser3, ser4]; 
    $scope.indexes = {"env1" : 0, "env2" : 1, "env3" : 2, "env4": 3}; 
    $scope.funcNames = [func1, func2, func3, func4]; 
    for(i=0;i<services.length;i++) 
    { 
     var group = { 
      "id": i, 
      "rowLength": 7,//check 
      "funcName": $scope.funcNames[i], 
      "clicked": [false, false, false, false], 
      "showResults": ["", "", "", ""], 
      "showLogs": ["", "", "", "",], 
      "testsRun": ["notStarted", "notStarted", "notStarted", "notStarted"], 
      "serviceName":services[i].toUpperCase(), 
      "ENV1":versionMap["env1"+services[i]], 
      "ENV2":versionMap["env2"+services[i]], 
      "ENV3":versionMap["env3"+services[i]], 
      "ENV4":versionMap["env4"+services[i]] 
     }; 
     $scope.groups.push(group); 
    }//end of for loop 

請指導，以什麼做錯了。

Answer 1

發現你的錯誤。

您正在重複DOM的ID被搞亂你的代碼。它必須是獨一無二的。如果有，可以嘗試添加組標識。

<!-- id cannot be same for any two doms --> 
<div id="status0{{group.id}}" class="collapse"> 
    <p background-color: "#39D1B4" color: "#fff"> 
     The tests which failed are : {{group.showResults[0]}}. 
     For more info, visit <a href="https://www.google.com" target="_blank">Google</a>. 
    </p> 
</div> 

同樣，你將不得不改變你的按鈕的目標以及

<button ng-class= "{'success':group.testsRun[0]==='Success', 'progress':group.testsRun[0]!='Success' && group.testsRun[0]!='failed', 'failed':group.testsRun[0]==='failed'}" ng-show="group.clicked[0]" data-toggle="collapse" data-target="#status0{{group.id}}">{{group.testsRun[0]}}</button>