0

1) I have a problem in merging table cell in using AngularJS, I want to merge the data that has the same data with the next row using rowspan.

Current Output:

enter image description here

Expected output:

enter image description here

Here is my current HTML code:

<tr ng-repeat="emp in EmployeeRM">
            <td rowSpan="{{emp.rows}}" ng-if="! emp.matchPreviousRow">
                {{emp.Name}}
                <br />
                <button class="btn btn-primary" ng-click="" id="btnEmpStatus">Remind</button>
            </td>
            <td>{{emp.ProjectName}}</td>
            <td>
                {{emp.ProjectManager}}
                <button class="btn btn-primary" ng-click="" id="btnPMstatus">Remind</button>
            </td>
            <td>
                {{emp.ResourceManager}}
                <button class="btn btn-primary" ng-click="" id="btnRMstatus">Remind</button>
            </td>
        </tr>
    </table>

Angularjs controller code:

 .controller('RMDashboardCtrl', function ($scope, $http, $rootScope, $state) 
  {
      GetEmployeeRM();
       function GetEmployeeRM() {
        $http({
            url: 'EvalService.asmx/GetEmployeesforRM',
            params: { EmpId: $rootScope.Empid, fromDate: from_Date, toDate: 
                       to_date, year: year },
            method: 'GET'
               }).then(function (response) {
                 $scope.EmployeeRM = response.data;
                 console.log(response.data);
               if (response.data.length > 0) {
                response.data[0].matchPreviousRow = false;
                for (var i = 0; i < response.data.length; i++) {
                    var field = response.data[i].Name;
                var rows = 1;
                for (var j = i + 1; j < response.data.length; j++) {
                    if (response.data[j].Name === field)
                    {
                       rows++;
                       response.data[j].matchPreviousRow = true;
                    } else {
                        response.data[j].matchPreviousRow = false;
                        break;
                    }
                }
                response.data[i].rows = rows;
                }
            }
        });
    }

Thanks in advance

Vasilis G.
  • 7,556
  • 4
  • 19
  • 29
Vidya
  • 1
  • 2
  • 1
    I think you can simply flatten your `$scope.EmployeeRM` data with JavaScript alone, removing the duplicates. Or you can try [to use the filter](https://stackoverflow.com/questions/15914658/how-to-make-ng-repeat-filter-out-duplicate-results) – Aleksey Solovey Dec 01 '17 at 11:30
  • Agree. Group or filter your data before sending to view – charlietfl Dec 01 '17 at 13:04

0 Answers0