javascript - 使用 ng-repeat 切换数据

Question

我的页面中有一个表格结构，每一行都出现在 ng-repeat 中。单击按钮时，我还有一个 data-toggle="collapse"data-target="#status0" 属性。这些按钮也是 ng-repeat div 的一部分。面临的问题是，如果我单击按钮，比如第 3 行第 4 列，它仍然在第一行第 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。

<!-- 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>