TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
mohan gowtham
NA
23
2.7k
angularjs,when am giving search option it is showing extra
Mar 8 2018 1:43 AM
AngularJS - AJAX - Grid
<!DOCTYPE html>
<html>
<head>
<title>AngularJS - AJAX - Grid</title>
<meta charset=
"utf-8"
/>
<style type=
"text/css"
>
body, input {
font-family: Tahoma;
font-size: 23px;
}
#table1 {
background-color: #e4055d;
}
#table1 tr {
background-color: #68dcfb;
}
#table1 tr:first-child {
background-color: gold;
}
#table1 tr td, #table1 tr th {
padding: 5px;
}
#table1 tr:hover {
background-color: #21b1d8;
cursor: pointer;
}
#table1 .newrow {
background-color: #317bf1;
}
#table1 input[type=text] {
width: 200px;
border: 2px solid blue;
}
table {
border-collapse: collapse;
}
table th, table td {
padding: 3px;
}
table th:hover {
cursor: pointer;
}
.arrow-down:after, .arrow-up:after {
content:
' '
;
position: relative;
left: 2px;
border: 8px solid transparent;
}
.arrow-down:after {
top: 10px;
border-top-color: black;
}
.arrow-up:after {
bottom: 15px;
border-bottom-color: black;
}
.arrow-down, .arrow-up {
padding-right: 10px;
}
</style>
<script src=
"angular.js"
></script>
<script>
var
app = angular.module(
"mymodule"
, []);
app.controller(
"mycontroller"
,
function
($scope, $http) {
$scope.showloading =
true
;
$scope.mastercheckboxchecked =
false
;
$scope.employees = [];
$http.get(
"api/EmployeesApi/get"
).success(
function
(response) {
for
(
var
i = 0; i < response.length; i++) {
$scope.employees.push({
"EmpID"
: response[i].EmpID,
"EmpName"
: response[i].EmpName,
"Salary"
: response[i].Salary,
"IsSelected"
:
false
,
"showedit"
:
false
});
}
$scope.showloading =
false
;
}).error(
function
(err) { alert(JSON.stringify(err)); });
var
emplist = [];
$scope.additems =
function
(emp) {
var
resemp = emplist.find(empiitem => empiitem.EmpID === emp.EmpID);
var
empindex = emplist.indexOf(resemp);
if
(resemp && resemp.EmpID) {
emplist.splice(empindex, 1);
}
else
{
emplist.push(emp);
}
console.log(emplist);
}
$scope.submit =
function
() {
var
list = []
var
emp = {
"EmpID"
:
""
,
"EmpName"
:
""
,
"Salary"
:
""
}
angular.forEach(emplist,
function
(value, index) {
emp.EmpID = value.EmpID;
emp.EmpName = value.EmpName;
emp.Salary = value.Salary;
list.push(emp);
});
$http.post(
"../api/emp2/Post"
, list).success(
function
(response) {
alert(
'inserted...'
)
}).error(
function
(err) { alert(JSON.stringify(err)); });
}
$scope.mastercheckboxclicked =
function
() {
if
($scope.mastercheckboxchecked) {
for
(
var
i = 0; i < $scope.employees.length; i++) {
$scope.employees[i].IsSelected =
true
;
}
}
else
{
for
(
var
i = 0; i < $scope.employees.length; i++) {
$scope.employees[i].IsSelected =
false
;
}
}
};
$scope.reverseSort =
false
;
$scope.currentPage = 0;
$scope.pageSize = 4;
$scope.numberOfPages =
function
() {
return
Math.ceil($scope.employees.length / $scope.pageSize);
}
});
app.filter(
'startFrom'
,
function
() {
return
function
(input, start) {
start = +start;
//parse to int
return
input.slice(start);
}
});
</script>
</head>
<body>
<h1>AngularJS - Ajax - Grid</h1>
<div ng-app=
"mymodule"
ng-controller=
"mycontroller"
>
<div
class
=
""
>
Search EmpID:<input type=
"text"
class
=
""
ng-model=
"search.EmpID"
placeholder=
"Employee ID"
ng-change=
"numberOfPages()"
/>
Search EmpName:<input type=
"text"
class
=
""
ng-model=
"search.EmpName"
placeholder=
"Employee Name"
ng-change=
"numberOfPages()"
/>
</div><br />
<img src=
"Images/ajax-loader.gif"
ng-show=
"showloading"
/>
<table border=
"1"
id=
"table1"
>
<tr>
<th><input type=
"checkbox"
ng-model=
"mastercheckboxchecked"
ng-change=
"mastercheckboxclicked()"
/></th>
<th ng-click=
"orderByField='EmpID'; reverseSort = !reverseSort"
>Emp ID</th>
<th ng-click=
"orderByField='EmpName'; reverseSort = !reverseSort"
>Emp Name</th>
<th ng-click=
"orderByField='Salary'; reverseSort = !reverseSort"
>Salary</th>
</tr>
<!--<tr ng-repeat=
"emp in employees | filter : {'EmpID': searchid}"
>-->
<tr ng-repeat=
"emp in employees | filter : search | orderBy:orderByField:reverseSort | startFrom:currentPage*pageSize | limitTo:pageSize"
>
<td><input type=
"checkbox"
ng-model=
"emp.IsSelected"
ng-click=
"additems(emp)"
/></td>
<td>
<span ng-show=
"!emp.showedit"
>{{emp.EmpID}}</span>
</td>
<td>
<span ng-show=
"!emp.showedit"
>{{emp.EmpName}}</span>
</td>
<td>
<span ng-show=
"!emp.showedit"
>{{emp.Salary}}</span>
</td>
</tr>
</table><br />
<button ng-disabled=
"currentPage == 0"
ng-click=
"currentPage=currentPage-1"
>
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled=
"currentPage >= employees.length/pageSize - 1"
ng-click=
"currentPage=currentPage+1"
>
Next
</button>
</br>
</br>
<input type=
"button"
value=
"Make Elgible"
ng-click=
"submit()"
/>
</div>
</body>
</html>
Reply
Answers (
1
)
How to Disable Save,Print,Ctrl+S,Right Click options inside
Getting an error while using update in gridview.