ng-include directive is used to include another HTML page in current HTML page - Reusability
It can take a static value (A HTML page) or a dynamic value (using variable set in $scope)
<div ng-include="'Result.html'"> </div>
OR
<div ng-include="resultPage"> </div>
SAMPLE HTML TO INCLUDE
Result.html
<table>
<thead>
<tr> <th>Name</th> <th>Post</th> <th>Salary</th> </tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
EXAMPLE 1. USING STATIC VALUE FOR VIEW
Main.html
<div ng-controller="myController">
<div ng-include="'Result.html'"> </div>
</div>
EXAMPLE 2. USING DYNAMIC VALUE FROM SCOPE PROPERTY
JS
var app = angular.module('module1', []);
app.controller("myController", function ($scope) {
var employees = [
{ name : "Shaan", city : "Jhansi", salary : 25000 },
...
]
$scope.employees = employees;
$scope.empView = "Result.html";});
Main.html
<div ng-controller="myController">
<div ng-include="empView"> </div>
</div>
EXAMPLE 3. USING DYNAMIC VALUE THROUGH DROP DOWN CHOICE
Main.html
<div ng-controller="myController">
Select view :
<select ng-model="empView">
<option value="Result1.html">Result 1</option>
<option value="Result2.html">Result 2</option>
</select> <br/> <br/>
<div ng-include="empView"> </div>
</div>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.