Ng-template Example

To do dynamic templating

by rahulshivsharan

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
		<div class="container">
			<div class="page-header">
				<h3>Dynamic HTML Template Content</h3>
				<div class="row">
				    <div class="col-md-6 col-md-offset-3">
				    	<div class="row">
					    <div class="col-md-12">
				   		<select ng-model="selectedCity" 
              ng-options="city as city for city in cityList"
              ng-change="getStudents()">
							<option value="">Select</option>
						</select>
					    </div>
					    <div class="col-md-12">
						    <ng-include src="templateName" />
					    </div>
					</div>
				    </div>
				</div>
			</div>
		</div>
		<script type="text/ng-template" id="studentsTemplate">
			<table class="table">
			    <tr>
				<th>Name</th>
				<th>Branch</th>
			    </tr>
			    <tr ng-repeat="student in selectedStudents">
				<td>{{student.name}}</td>
				<td>{{student.branch}}</td>
			    </tr>	
			</table>
		</script>	
	</body>

JavaScript

(function(){
				angular.module("myApp",[]);
		       		angular.module("myApp").controller("myCtrl",myCtrl);
		       		angular.module("myApp").factory("StudentService",StudentService);
				myCtrl.$inject = ["$scope","$log","StudentService","$timeout"];

				function StudentService(){
					var obj = new Object();
					var studentMap = new Object();
					obj.getStudents = getStudents;
					obj.getCities = getCities;

					studentMap["New York"] = [];
					studentMap["Barbados"] = [];
					studentMap["Istambul"] = [];

					studentMap["New York"].push({"name" : "Sankalp Kunder", "branch" : "Mechanical Engineering"});
					studentMap["New York"].push({"name" : "Sunil Tandel", "branch" : "Instrumentation Engineering"});
					studentMap["New York"].push({"name" : "Shamshuddin Ahmed", "branch" : "Production Engineering"});
					studentMap["New York"].push({"name" : "Samir Gupta", "branch" : "Computer Engineering"});
					
					studentMap["Barbados"].push({"name" : "Vaibhav Patil", "branch" : "Fashion Designing"});
					studentMap["Barbados"].push({"name" : "Suresh Owhal", "branch" : "Marketing Managment"});
					studentMap["Barbados"].push({"name" : "Kavita Nandgaonkar", "branch" : "History and Litrature"});
					studentMap["Barbados"].push({"name" : "Swapnali Joshi", "branch" : "Commerce"});
					studentMap["Barbados"].push({"name" : "Vithhal Gaikwad", "branch" : "Law"});
					
					studentMap["Istambul"].push({"name" : "Salim Khan", "branch" : "Law"});
					studentMap["Istambul"].push({"name" : "Aslam Shaikh", "branch" : "Animal Husbandry"});
					studentMap["Istambul"].push({"name" : "Liyaqat Ali", "branch" : "Carpentary"});
					studentMap["Istambul"].push({"name" : "Suleman Kaskar", "branch" : "Cutting and Polishing"});

					return obj;
					
					function getStudents(city){
						return studentMap[city];
					}
					
					function getCities(){
						var ct = [];
						angular.forEach(studentMap,function(value,key){
							ct.push(key);		
						});
						return...