For Example Code:
File name : index.html
<html>
<head>
<script src="http://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="tablecenter" ng-app="app" ng-controller="editController">
<div>
<table>
<thead>
<th><a href="" ng-click="order('name')" style="font-size: 18px; text-decoration: none; color: #fff; font-weight: 600;">Name</a></th>
<th><a href="" ng-click="order('age')" style="font-size: 18px; text-decoration: none; color: #fff; font-weight: 600;">Age</a></th>
<th></th>
</thead>
<tbody>
<tr>
<td><input type="text" class="textbox" ng-model="search.name" /></td>
<td><input type="text" class="textbox" ng-model="search.age" /> </td>
<td></td>
</tr>
<tr ng-repeat="contact in model.contacts | orderBy:predicate:reverse| filter:paginate | filter:search " ng-include="getTemplate(contact)" ng-class-odd="'odd'">
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
<select ng-model="numPerPage" class="dropdown">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
</div>
<script type="text/ng-template" id="display">
<td>{{contact.name}}</td>
<td>{{contact.age}}</td>
<td>
<button class="btn btn-info" ng-click="editContact(contact)">Edit</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" class="textbox" ng-model="model.selected.name" /></td>
<td><input type="text" class="textbox" ng-model="model.selected.age" /></td>
<td>
<button class="btn btn-info" ng-click="saveContact(model.selected.id)">Save</button>
<button class="btn btn-info" ng-click="reset()">Cancel</button>
</td>
</script>
</div>
</body>
</html>
File name : style.css
.dropdown
{
position: absolute;
margin-top: 21px;
right: 20%;
width: 65px;
padding: 4px;
border: 1px solid #7E6B6B;
border-radius: 4px;
}
.textbox
{
background-color: rgba(53, 49, 49, 0.13);
width: 95%;
padding: 6px;
border: 1px solid #000000;
border-radius: 4px;
color: #000;
font-weight: 600;
font-size: 14px;
}
.tablecenter
{
margin-left: 20%;margin-right: 20%;
}
.btn {
display: inline-block;
padding: 1px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn.btn-info {
background-color: #00c0ef;
border-color: #00acd6;
}
table{
border: 1px solid black;
width: 100%;
}
.odd {
background-color: rgb(215, 215, 215);
color: #0E24BB;
}
th{
height: 30px;
min-width: 100px;
border: 1px solid;
}
td{
text-align: center;
height: 30px;
min-width: 100px;
border: 1px solid;
padding: 5px;
}
thead {
background-color: darkgray;
color: white !important;
height: 30px;
}
.pagination{
display:inline-block;
padding-left:0;
margin:20px 0;
border-radius:4px
}
.pagination>li{
display:inline
}
.pagination>li>a,.pagination>li>span{
position:relative;
float:left;padding:6px 12px;
line-height:1.42857143;
text-decoration:none;
color:#428bca;
background-color:#fff;
border:1px solid #ddd;
margin-left:-1px
}
.pagination>li:first-child>a,.pagination>li:first-child>span{
margin-left:0;
border-bottom-left-radius:4px;
border-top-left-radius:4px
}
.pagination>li:last-child>a,.pagination>li:last-child>span{
border-bottom-right-radius:4px;
border-top-right-radius:4px
}
.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{
color:#2a6496;
background-color:#eee;
border-color:#ddd
}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{
z-index:2;
color:#fff;
background-color:#428bca;
border-color:#428bca;
cursor:default
}
.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{
color:#999;
background-color:#fff;
border-color:#ddd;
cursor:not-allowed
}
.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{
border-bottom-left-radius:6px;
border-top-left-radius:6px
}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{
border-bottom-right-radius:
6px;border-top-right-radius:6px
}
.pagination-sm>li>a,.pagination-sm>li>span{
padding:5px 10px;
font-size:12px
}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{
border-bottom-left-radius:3px;
border-top-left-radius:3px
}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{
border-bottom-right-radius:3px;
border-top-right-radius:3px
}
File name : main.js
var demo = angular.module("app", ['ui.bootstrap']);
demo.controller("editController",function($scope) {
$scope.predicate = 'name';
$scope.reverse = true;
$scope.currentPage = 1;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.model = {
contacts: [{id: 1, name: "Rahul", age: 28}, {id: 2, name: "Kaushik", age: 24},
{id: 3, name: "Sanjay", age: 32}, {id: 4, name: "Sagar", age: 40},
{id: 5, name: "Ajay", age: 28}, {id: 6, name: "Vijay", age: 24},
{id: 7, name: "Ketan", age: 28}, {id: 8, name: "Karan", age: 24},
{id: 9, name: "Gautam", age: 28}, {id: 10, name: "Heena", age: 24},
{id: 11, name: "Gaurang", age: 28}, {id: 12, name: "Gaurav", age: 24},
{id: 13, name: "Naresh", age: 28}, {id: 14, name: "Dinesh", age: 24},
{id: 15, name: "Suresh", age: 28}, {id: 16, name: "Mitesh", age: 24},
{id: 17, name: "Raman", age: 28}, {id: 18, name: "Hitesh", age: 24},
{id: 19, name: "Neha", age: 28}, {id: 20, name: "Sandhya", age: 24}],
selected: {}
};
$scope.totalItems = $scope.model.contacts.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.model.contacts.indexOf(value);
return (begin <= index && index < end);
};
$scope.getTemplate = function (contact) {
if (contact.id === $scope.model.selected.id) return 'edit';
else return 'display';
};
$scope.editContact = function (contact) {
$scope.model.selected = angular.copy(contact);
};
$scope.saveContact = function (idx) {
for (var i = 0; i < $scope.model.contacts.length; i++) {
if ($scope.model.contacts[i].id === idx) {
$scope.model.contacts[i] = angular.copy($scope.model.selected);
break;
}
}
$scope.reset();
};
$scope.reset = function () {
$scope.model.selected = {};
};
});
No comments:
Post a Comment
Thanks to comment our blog. i will contact you as soon as possible