<div dir="ltr" style="text-align: left;" trbidi="on">
<!DOCTYPE html>
<html>
<head>
<script
src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src="D:/Study/anugular/dirPagination.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
#tbl ,th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
#tbl
{
width:100%;
}
div
{
margin:5%;
width:500px;
}
.label
{
background-color: #707070;
}
#tbl tr:nth-child(odd) {
background-color: #f1f1f1;
}
#tbl tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<!-- Create New Employee -->
<div ng-hide="editorEnabled">
<form name="myForm" ng-model="formModel" ng-submit="addEmployee()"
novalidate> <table id="tbl">
<tr>
<td>Name: </td>
<td>
<input type="text" name="username" ng-model="name" required>
</td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text" ng-model="country" required></td>
</tr>
<tr>
<td>Age:</td>
<td> <input type="number" ng-model="age" required></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="emailid" ng-model="email" required>
</td>
</tr>
<tr>
<td>Gender:</td>
<td><label data-ng-repeat="gender in genders">
<input name="Gender" type="radio" value="{{gender.value}}"
ng-model="$parent.personGender" /> {{gender.text}}
</label></td>
</tr>
<tr>
<td>Department:</td>
<td>
<select name="dept" ng-model="department" >
<option data-ng-repeat="dept in departments"
value="{{dept.value}}">{{dept.text}}</option>
</select>
<span style="color:red" ng-show="myForm.dept.$dirty && myForm.dept.$invalid">
<span ng-show="myForm.dept.$error.required">Department is required.</span>
</span> </span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" >
</td>
</tr>
</table>
</form>
</div>
<!-- Edit Employee -->
<div ng-show="editorEnabled">
<form name="editablemyForm" ng-model="editableformModel" ng-submit="saveEmployee()"
novalidate>
<table id="tbl">
<tr>
<td>Name: </td>
<td>
<input type="text" name="editableusername" ng-model="editablename" required>
</td>
</tr>
<tr>
<td>Country:</td>
<td><input type="text" ng-model="editablecountry" required></td>
</tr>
<tr>
<td>Age:</td>
<td> <input type="number" ng-model="editableage" required></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" ng-model="editableemail" required></td>
</tr>
<tr>
<td>Gender:</td>
<td><label data-ng-repeat="gender in genders">
<input name="editableGender" type="radio" value="{{gender.value}}"
ng-model="$parent.editablepersonGender"/> {{gender.text}}
</label></td>
</tr>
<tr>
<td>Department:</td>
<td>
<select name="dept" ng-model="editabledepartment">
<option data-ng-repeat="dept in departments"
value="{{dept.value}}">{{dept.text}}</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Update" >
<input type="button" value="Cancel" ng-click="CancelEdit()" >
</td>
</tr>
</table>
</form>
</div>
<br/>
<span class="label">Ordered By: {{orderByField}},
Reverse Sort: {{reverseSort}}</span><br><br>
<label>Search</label>
<input type="text" ng-model="search" class="form-control"
placeholder="Search">
<b> Size :</b> <input type="text" ng-model="pagesize"
class="form-control" placeholder="Size">
</br>
<table class="table table-bordered">
<thead>
<th>
Edit
</th>
<th>
<a href="#" ng-click="orderByField='id';
reverseSort = !reverseSort">Id
<span ng-show="orderByField == 'id'">
<span ng-show="!reverseSort">^</span>
<span ng-show="reverseSort">v</span></span>
</a>
</th>
<th>
<a href="#" ng-click="orderByField='name';
reverseSort = !reverseSort">Name
<span ng-show="orderByField == 'name'">
<span ng-show="!reverseSort">^</span>
<span ng-show="reverseSort">v</span></span>
</a>
</th>
<th>Country</th>
<th>
<a href="#" ng-click="orderByField='age';
reverseSort = !reverseSort">
Age <span ng-show="orderByField == 'age'">
<span ng-show="!reverseSort">^</span>
<span ng-show="reverseSort">v</span>
</span>
</a>
</th>
<th>Email</th>
<th>Gender</th>
<th>Department</th>
<th>Remove</th>
</thead>
<tr dir-paginate="employee in employees| orderBy:orderByField:reverseSort |
filter:{name:search || ''}:strict | itemsPerPage:pagesize">
<!-- <tr ng-repeat="employee in employees| orderBy:orderByField:reverseSort |
filter:{name:search || ''}:strict "> -->
<td>
<button class="btn" ng-click="editEmployee(employee.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.country}}</td>
<td>{{employee.age}}</td>
<td>{{employee.email}}</td>
<td>{{getGenderTextFromValue(employee.gender)}} </td>
<td>{{getDepartmentTextFromValue(employee.department)}}</td>
<td><input type="button" value="Remove" class="btn btn-primary" ng-disabled="editorEnabled" ng-click="deleteEmployee(employee.id)"/>
</td>
</tr>
</table>
<!--Pagination Control-->
<dir-pagination-controls max-size="pagesize" direction-links="true" boundary-links="true" >
</dir-pagination-controls>
</div>
</body>
</html>
<script>
var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
app.controller('personCtrl', function($scope) {
/****Initialisation at start ********/
$scope.orderByField = 'id';
$scope.reverseSort = false;
$scope.pagesize = 4;
$scope.personGender=3;
$scope.editorEnabled = false;
$scope.employees = [
{id:1,name:'Jani',country:'Norway',age:30,email:'aq@b.com', gender:1,department:2},
{id:2,name:'Hege',country:'Sweden',age:20,email:'aw@b.com',gender:3,department:4},
{id:3,name:'Kai',country:'Denmark',age:22,email:'ad@b.com',gender:2,department:1},
{id:4,name:'Raj',country:'India',age:25,email:'aa@b.com',gender:1,department:3},
{id:5,name:'Rani',country:'Nepal',age:24,email:'as@b.com',gender:2,department:1}
];
$scope.genders =
[
{value:1, text: "Male"}, {value:2, text:"Female"}, {value:3, text:"Other"}
];
$scope.departments =
[
{value:1, text: "HR"}, {value:2, text:"Admin"}, {value:3, text:"IT"}, {value:4, text:"Finance"}
];
/******find gender text from value**********/
$scope.getGenderTextFromValue = function(value) {
for (i in $scope.genders) {
if ($scope.genders[i].value==value) {
return $scope.genders[i].text ;
}
}
};
/******find department text from value**********/
$scope.getDepartmentTextFromValue = function(value) {
for (i in $scope.departments) {
if ($scope.departments[i].value==value) {
return $scope.departments[i].text ;
}
}
};
/****** Add a Item to the list**********/
$scope.addEmployee = function () {
/*finding max id from exiting to generate new max id for new record*/
$scope.maxId=0;
for (i in $scope.employees) {
if ($scope.employees[i].id >$scope.maxId) {
$scope.maxId=$scope.employees[i].id ;
}
}
$scope.employees.push({
id: $scope.maxId+1,
name: $scope.name,
age: $scope.age,
country: $scope.country,
email: $scope.email,
gender:$scope.personGender,
department:$scope.department
});
$scope.name='';
$scope.age='';
$scope.country='';
$scope.email ='';
}
/*********Get Item to Edit from list********** */
$scope.id='';
$scope.editEmployee = function(id) {
/*this id is used at the time of sving edited employee records*/
$scope.id=id;
$scope.editorEnabled = true;
$scope.editablename = $scope.employees[id-1].name;
$scope.editablecountry= $scope.employees[id-1].country;
$scope.editableage= $scope.employees[id-1].age;
$scope.editableemail= $scope.employees[id-1].email;
$scope.editablepersonGender= $scope.employees[id-1].gender;
$scope.editabledepartment= $scope.employees[id-1].department;
}
/*********Save Edited Records***********/
$scope.saveEmployee = function() {
$scope.employees[$scope.id-1].name=$scope.editablename;
$scope.employees[$scope.id-1].age=$scope.editableage;
$scope.employees[$scope.id-1].country=$scope.editablecountry;
$scope.employees[$scope.id-1].email=$scope.editableemail;
$scope.employees[$scope.id-1].gender=$scope.editablepersonGender;
$scope.employees[$scope.id-1].department=$scope.editabledepartment;
$scope.editorEnabled = false;
}
/*******Cacnel edit operation*********/
$scope.CancelEdit=function(){
$scope.editorEnabled = false;
}
/*********Delete row from list***********/
$scope.deleteEmployee = function (id) {
for (i in $scope.employees) {
if ($scope.employees[i].id == id) {
if( confirm("This Record will get deleted permanently"))
{
$scope.employees.splice(i, 1);
}
}
}
}
});
</script>
</div>
No comments:
Post a Comment