Angularjs-02-Nested-ng-repeat

Angular-js | Nested ng-repeat

by Shishir Morshed

HTML

<body ng-app="myApp" ng-controller="mainCTRL">
	<h2>Nested ng-repeat</h2>
	
	<ul>
		<li ng-repeat="team in employee_data">
			<em><b>Team: {{team.team_name}}</b></em>
			<span>PM:</span>
			<ul>
				<li ng-repeat="pm in team.PM">
					<span>Name: {{pm.name}}</span>
				</li>
			</ul>
			<br>
			<span>Web Developer:</span>
			<ul>
				<li ng-repeat="dev in team.developer">
					<span>Name: {{dev.name}}</span>
				</li>
			</ul>
			<br>
			<span>QA:</span>
			<ul ng-repeat="qa in team.QA">
				<span>Name: {{qa.name}}</span>
			</ul>
			<br>
		</li>
	</ul>
</body>

CSS

ul li{list-style: none;}
ul li span {display: block;

JavaScript

var myApp = angular.module('myApp', []);

var employee_data = [
    {team_name:'Hogarth NY',
     developer:[
         {name: 'hasan', email: '[email protected]'},
         {name: 'hadi', email:'[email protected]'},
         {name: 'shishir', email: '[email protected]'}],
     PM:[
         {name: 'ataul',email: '[email protected]'},
         {name: 'shafiq', email:'[email protected]'},
         {name: 'niaz',email: '[email protected]'}],
     QA:[
         {name: 'anam',email: '[email protected]'},
         {name: 'sumon',email: '[email protected]'}]
    },
    {team_name:'Hogarth UK',
     developer:[
         {name: 'Reza', email: '[email protected]'},
         {name: 'Robi', email:'[email protected]'},
         {name: 'Bellal', email: '[email protected]'}],
     PM:[
         {name: 'Jamil',email: '[email protected]'},
         {name: 'Tushar', email:'[email protected]'},
         {name: 'Amdad',email: '[email protected]'}],
     QA:[
         {name: 'Jiken',email: '[email protected]'},
         {name: 'Poritush',email: '[email protected]'}]
    }
		]
myApp.controller('mainCTRL', function ($scope) {
    $scope.employee_data = employee_data;
});