Data Toggle with ng-repeat

Question

I have a tabular structure in my page with each row being present in ng-repeat. I also have a data-toggle="collapse" data-target="#status0" property on click of a button. These buttons are also part of the ng-repeat div. The problem am facing is if I click on the button, in say 3rd row, 4th column, it still shows the collapsible div in the first row 4th column. That is the collapsible divs are always coming in the first row. Am unable to debug how to get this working.

My html code looks like this :

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

The $scope.groups looks like this:

$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

Please guide as to what am doing wrong.

Answer 1

Found your error.

You are repeating dom id's which is messing up your codes. it has to be unique. You can try to add group id to it if you have.

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

Similarly you will have to change your button's target as well

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