add multiple rows in one column using angular ng-repeat

Question

I want to generate table contents using json object. I am using ng-repeat to insert multiple rows in a table. But I have to generate table like the following.

Answer 1

Use ng-repeat-start and ng-repeat-end. For example:

    {{user.id}}                    


    S{{subject.id}}

Here is a full example:

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {

    var users = [{
        id: 1,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 2,
            name: "phy"
        }]
    }, {
        id: 2,
        subjects: [{
            id: 1,
            name: "eng"
        }, {
            id: 3,
            name: "math"
        }, {
            id: 4,
            name: "hist"
        }, 
        {
            id: 5,
            name: "geog"
        }]
    }];

    $scope.users = users;
});

table { border-collapse: collapse; }
td { border: 1px solid Black; }

    

        

            
ID
            
Subjects
        
    
    

        

            
{{user.id}}
                    
        
        

            
S{{subject.id}}
        
    

Also, working fiddle here: http://jsfiddle.net/donal/r51d5fw5/17/

An alternative version, using nested ng-repeat, can be implemented using a div to display the nested subject information:

    {{user.id}}
    
        
S{{subject.id}}