Sunday, 19 March 2017

How to use ng-include to include another HTML page ?


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.