One step ahead: Populating list with nested json data using ng-repeat

Tuesday 27 January 2015

Populating list with nested json data using ng-repeat

Today working on nested json data I thought of trying to populate data into list tag using ng-repeat, something kind of nested ng-repeat, I am not finding any proper word for it. So it happened like this. I have created one array having to fields Name and Children, where children consists of another child array having gain 2 fields, Name and Age. So I have use 2 nested type ng-repeat, outer one parsing the parent array while inner ng-repeat parsing inner child array. So here is the code and I have not put it into separate script and included everything into one single HTML page.

<!DOCTYPE html>
<html data-ng-app="app">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Transclude example</title>
    <style>
        li
       {
        list-style-type:none;
        }
    </style>
    <script src="https://code.angularjs.org/1.0.8/angular.js"></script>
    <script>

    var app = angular.module('app', []);
    app.controller('MainCtrl', function($scope) {
    $scope.mydata = [
        {Name:'Smith',Children:[
        {Name:'Max',Age:'5'},
        {Name:'Mini',Age:'3'},
        {Name:'Jango',Age:'4'}]
        },
        {Name:'Jacko',Children:[
        {Name:'Alia',Age:'4'},
        {Name:'Alexa',Age:'3'},
        {Name:'Pinto',Age:'7'}]
        },
        {Name:'Patrick',Children: [
        {Name:'Blanc',Age:'9'},
        {Name:'Minova',Age:'13'},
        {Name:'Jude',Age:'14'}]
        },
        {Name:'Julia',Children:[
        {Name:'Mama',Age:'2'},
        {Name:'Maggi',Age:'11'},
        {Name:'Troy',Age:'12'}]
        }
        ];
    });
   </script>
</head>

<body data-ng-controller="MainCtrl">
    <ul ng-repeat="data in mydata">
    <li>{{data.Name}}</li>
    <li ng-repeat="dt in data.Children"> {{dt.Name}} - {{dt.Age}}</li>
    </ul>
</body>
</html>

AngularJS Transclude example

{{data.Name}}
{{dt.Name}} - {{dt.Age}}

One step ahead

Tuesday 27 January 2015

Populating list with nested json data using ng-repeat

No comments:

Total Pageviews