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。

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

数据切换与ng-repeat

1 个答案: