IR Punch IR Punch - 4 months ago 24
AngularJS Question

AngularJS - Bind a Nested Collection without GroupBy in a HTML Table

I'm having a Collection, its purely a GroupBy data. I need to bind the collection without GroupBy in HMTL Table using ng-repeat.

I already posted a question AngularJS - Bind nested Collection in a HTML Table using Rowspan - But this question is just opposite to the said question.

My Collection is

$scope.Persons = [

{
Name: "Jhon",
Age: 21,
Mobile: [
{
Make: "Apple",
Model: "iPhone 6"
},
{
Make: "Samsung",
Model: "Galaxy S6"
},
{
Make: "Sony",
Model: "Xperia Z5"
}

]
},
{
Name: "Watson",
Age: 19,
Mobile: [
{
Make: "Apple",
Model: "iPhone 6S"
},
{
Make: "Samsung",
Model: "Galaxy S7"
}

]
}

];


My Expected HTML Table should be



<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>John</td>
<td>21</td>
<td>Apple</td>
<td>iPhone 6</td>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td>Samsung</td>
<td>Galaxy S6</td>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td>Sony</td>
<td>Xperia Z5</td>
</tr>
<tr>
<td>Watson</td>
<td>19</td>
<td>Apple</td>
<td>iPhone 6S</td>
</tr>
<tr>
<td>Watson</td>
<td>19</td>
<td>Samsung</td>
<td>Galaxy S7</td>
</tr>
</table>





Kindly assist me how to bind a collection in
ng-repeat
without grouping. I'm expecting the solution in the HTML Angular level not in code behind.

Answer

You should use the same approach what I said in the reference question.

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>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="main in Persons">
            <td>
                <p>{{main.Name}}</p>
            </td>
            <td>
                <p>{{main.Age}}</p>
            </td>
            <td>
                <p>{{main.Mobile[0].Make}}</p>
            </td>
            <td>
                <p>{{main.Mobile[0].Model}}</p>
            </td>
        </tr>
        <tr ng-repeat-end ng-repeat="sub in main.Mobile" ng-if="!$first">
            <td>
                <p>{{main.Name}}</p>
            </td>
            <td>
                <p>{{main.Age}}</p>
            </td>
			<td>
                <p>{{sub.Make}}</p>
            </td>
            <td>
                <p>{{sub.Model}}</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.Persons = [

    {
        Name: "Jhon",
        Age: 21,
        Mobile: [
            {
                Make: "Apple",
                Model: "iPhone 6"
            },
            {
                Make: "Samsung",
                Model: "Galaxy S6"
            },
            {
                Make: "Sony",
                Model: "Xperia Z5"
            }

        ]
    },
    {
        Name: "Watson",
        Age: 19,
        Mobile: [
            {
                Make: "Apple",
                Model: "iPhone 6S"
            },
            {
                Make: "Samsung",
                Model: "Galaxy S7"
            }

        ]
    }

];

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