Explanation:
- Download angular.js from https://angularjs.org/
- Keep and the files in same folder. i.e. angular.js, MyAngular,java, EmployeeTable,html, EmployeeList.html, script19.js and css9.css
- Below is the HTML code of MyAngular.java (mainfile) which we will be executing. It contains reference of 2 files. EmployeeTable.html and EmployeeList.html.
- On selection of Table value from the dropdown will display Value in Table format(giving call to EmployeeTable.html) and if selecting List from dropdown will display value in list format(as per EmployeeList.html)
-----MyAngular.java (Main File) ---------
<html ng-app="myModule">
<head>
<title>This is example of ng-include. We will be including EmployeeTable.html in this page & EmployeeList.html </title>
<script src="angular.js"></script>
<script src="script19.js"></script>
<link href="css9.css" rel="stylesheet"></link>
</head>
<body ng-controller="myController">
select View <select ng-model="employeeView">
<option value="EmployeeTable.html">Table</option>
<option value="EmployeeList.html">List</option>
</select>
<br />
<div ng-include="employeeView">
</div>
</body>
</html>
-----------EmployeeTable.html-------
<br />
<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>
-----------EmployeeList.html-------
<br />
<ul ng-repeat="employee in employees">
<li>{{employee.name}}
<ul>
<li>{{employee.gender}} </li>
<li>{{employee.salary}} </li>
</ul>
</li>
</ul>
------------Script19.js-------------
- By Default we setting EmployeeTable.html as employeeView as Table will be displayed by default
var myApp = angular.module("myModule",[]).
controller("myController",function($scope){
var employees = [
{name:"Arshim",gender:"Male",salary:1000 },
{name:"Ram",gender:"Male",salary:2000 },
{name:"Shayam",gender:"Male",salary:4000 },
{name:"Penos",gender:"Female",salary:6000 },
{name:"David",gender:"Female",salary:7000 }
];
$scope.employees = employees;
$scope.employeeView = "EmployeeTable.html";
});
 |
| Initial when page will be loaded. |
 |
When list is selected from dropdown. |
No comments:
Post a Comment