IR Punch IR Punch - 4 months ago 70
HTML Question

AngularJS - Bind nested Collection in a HTML Table using Rowspan

How to Bind a Nested Collection (GroupBy X 3 Times) in a HTML

Table
using Rowspan.

Most of the post explained only simple
rowspan
not for multiple complex
rowsapn


My AngularJS Collection is

$scope.Persons = [

{
Name: "Jhon",
Age: 21,
Mobile: [
{
Make: "Apple",
Model: "iPhone 6",
Apps: [
{
Name: "WhatsApp",
InstalledOn: 2016
},
{
Name: "FaceBook",
InstalledOn: 2016
}
]
},
{
Make: "Samsung",
Model: "Galaxy S6",
Apps: [
{
Name: "WhatsApp",
InstalledOn: 2015
},
{
Name: "FaceBook",
InstalledOn: 2016
}
]
},
{
Make: "Sony",
Model: "Xperia Z5",
Apps: [
{
Name: "WhatsApp",
InstalledOn: 2016
},
{
Name: "FaceBook",
InstalledOn: 2016
}
]
}

]
},
{
Name: "Watson",
Age: 19,
Mobile: [
{
Make: "Apple",
Model: "iPhone 6S",
Apps: [
{
Name: "Twitter",
InstalledOn: 2016
},
{
Name: "FaceBook",
InstalledOn: 2016
},
{
Name: "WhatsApp",
InstalledOn: 2016
}
]
},
{
Make: "Samsung",
Model: "Galaxy S7",
Apps: [
{
Name: "Twitter",
InstalledOn: 2016
},
{
Name: "FaceBook",
InstalledOn: 2016
},
{
Name: "Instagram",
InstalledOn: 2016
}
]
}

]
}

];


My Expected HTML Table should be



<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
<p>John</p>
</td>
<td rowspan="6">
<p>21</p>
</td>
<td rowspan="2">
<p>Apple</p>
</td>
<td rowspan="2">
<p>iPhone 6</p>
</td>
<td>
<p>WhatsApp</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td>
<p>FaceBook</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>Samsung</p>
</td>
<td rowspan="2">
<p>Galaxy S6</p>
</td>
<td>
<p>WhatsApp</p>
</td>
<td>
<p>2015</p>
</td>
</tr>
<tr>
<td>
<p>FaceBook</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td rowspan="2">
<p>Sony</p>
</td>
<td rowspan="2">
<p>Xperia Z5</p>
</td>
<td>
<p>WhatsApp</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td>
<p>FaceBook</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td rowspan="6">
<p>Watson</p>
</td>
<td rowspan="6">
<p>19</p>
</td>
<td rowspan="3">
<p>Apple</p>
</td>
<td rowspan="3">
<p>iPhone 6S</p>
</td>
<td>
<p>Twitter</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td>
<p>FaceBook</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td>
<p>WhasApp</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td rowspan="3">
<p>Samsung</p>
</td>
<td rowspan="3">
<p>Galaxy S7</p>
</td>
<td>
<p>WhatsApp</p>
</td>
<td>
<p>2015</p>
</td>
</tr>
<tr>
<td>
<p>FaceBook</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
<tr>
<td>
<p>Instagram</p>
</td>
<td>
<p>2016</p>
</td>
</tr>
</table>





How to bind a multi nested collection in a HTML Table using
Rowspan
? I given a sample HTML
Table
Layout, Kindly review it and assist me how to bind the above said collection in
ng-reapat
.

Kindly assist me how to bind and do the
ng-repeat
.

Answer

You should use ng-repeat-start and ng-repeat-end ng-repeat to accomplish your requirement.

The Complete HTML Source Code is

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<table border="1" cellpadding="2" cellspacing="0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Make</th>
            <th>Model</th>
            <th>App</th>
            <th>InstalledOn</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="main in Persons">
            <td rowspan="{{GetParentCount(main.Mobile)}}">
                <p>{{main.Name}}</p>
            </td>
            <td rowspan="{{GetParentCount(main.Mobile)}}">
                <p>{{main.Age}}</p>
            </td>
            <td rowspan="{{main.Mobile[0].Apps.length}}">
                <p>{{main.Mobile[0].Make}}</p>
            </td>
            <td rowspan="{{main.Mobile[0].Apps.length}}">
                <p>{{main.Mobile[0].Model}}</p>
            </td>
            <td>
                <p>{{main.Mobile[0].Apps[0].Name}}</p>
            </td>
            <td>
                <p>{{main.Mobile[0].Apps[0].InstalledOn}}</p>
            </td>
        </tr>

        <tr ng-repeat-start="sub in main.Mobile" ng-if="!$first">

            <td rowspan="{{sub.Apps.length}}">
                <p>{{sub.Make}}</p>
            </td>
            <td rowspan="{{sub.Apps.length}}">
                <p>{{sub.Model}}</p>
            </td>
            <td ng-if="!$first">
                <p>{{sub.Apps[0].Name}}</p>
            </td>
            <td ng-if="!$first">
                <p>{{sub.Apps[0].InstalledOn}}</p>
            </td>
        </tr>
        <tr ng-repeat-end ng-repeat="last in sub.Apps" ng-if="!$first">
            <td>
                <p>{{last.Name}}</p>
            </td>
            <td>
                <p>{{last.InstalledOn}}</p>
            </td>
        </tr>
        <tr ng-repeat-end></tr>
    </tbody>
</table>
</div>

<script>
    var app = angular.module('myApp', ['ngMaterial']);

    app.controller('myCtrl', function ($scope, $http, $q) {

$scope.GetParentCount = function(item) {
    var count = 0;
    angular.forEach(item, function (item) {
        count += item.Apps.length;
    });
    return count;
};

        $scope.Persons = [

    {
        Name: "Jhon",
        Age: 21,
        Mobile: [
            {
                Make: "Apple",
                Model: "iPhone 6",
                Apps: [
                    {
                        Name: "WhatsApp",
                        InstalledOn: 2016
                    },
                    {
                        Name: "FaceBook",
                        InstalledOn: 2016
                    }
                ]
            },
            {
                Make: "Samsung",
                Model: "Galaxy S6",
                Apps: [
                    {
                        Name: "WhatsApp",
                        InstalledOn: 2015
                    },
                    {
                        Name: "FaceBook",
                        InstalledOn: 2016
                    }
                ]
            },
            {
                Make: "Sony",
                Model: "Xperia Z5",
                Apps: [
                    {
                        Name: "WhatsApp",
                        InstalledOn: 2016
                    },
                    {
                        Name: "FaceBook",
                        InstalledOn: 2016
                    }
                ]
            }

        ]
    },
    {
        Name: "Watson",
        Age: 19,
        Mobile: [
            {
                Make: "Apple",
                Model: "iPhone 6S",
                Apps: [
                    {
                        Name: "Twitter",
                        InstalledOn: 2016
                    },
                    {
                        Name: "FaceBook",
                        InstalledOn: 2016
                    },
                    {
                        Name: "WhatsApp",
                        InstalledOn: 2016
                    }
                ]
            },
            {
                Make: "Samsung",
                Model: "Galaxy S7",
                Apps: [
                    {
                        Name: "Twitter",
                        InstalledOn: 2016
                    },
                    {
                        Name: "FaceBook",
                        InstalledOn: 2016
                    },
                    {
                        Name: "Instagram",
                        InstalledOn: 2016
                    }
                ]
            }

        ]
    }

];

    });
	
</script>
</body>
</html>