Part 16 ng include directive in AngularJS

ng-include directive is used to embed an HTML page into another HTML page. This technique is extremely useful when you want to reuse a specific view in multiple pages in your application. The value of ng-include directive can be the name of the HTML page that you want to reuse or a property on the $scope object that points to the reusable HTML page.EmployeeList.html : This is the HTML page that we intend to reuse on multiple HTML pages

<table>  <thead>    <tr>      <th>Name</th>      <th>Gender</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>

Script.js : Notice, in the controller function we have employeeList property attached to the $scope object. This property points to the EmployeeList.html file that we want to reuse.

var app = angular    .module("myModule", [])    .controller("myController", function ($scope) {       var employees = [        { name: "Ben", gender: "Male", salary: 55000 },        { name: "Sara", gender: "Female", salary: 68000 },        { name: "Mark", gender: "Male", salary: 57000 },        { name: "Pam", gender: "Female", salary: 53000 },        { name: "Todd", gender: "Male", salary: 60000 }      ];       $scope.employees = employees;      $scope.employeeList = "EmployeeList.html";    });

If the user selects Table from the dropdownlist, the employee data should be presented using a TableIf the user selects List from the dropdownlist, the employee data should be presented using an unordered listEmployeeTable.html : This HTML page presents the employee data using a table element

<table>  <thead>    <tr>      <th>Name</th>      <th>Gender</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>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Part 16 ng include directive in AngularJS

关键词：JS