Post
Ask Question
mohan gowtham

mohan gowtham

  • NA
  • 23
  • 2.6k

angularjs,when am giving search option it is showing extra

Mar 8 2018 1:43 AM
AngularJS - AJAX - Grid
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>AngularJS - AJAX - Grid</title>  
  5. <meta charset="utf-8" />  
  6. <style type="text/css">  
  7. body, input {  
  8. font-family: Tahoma;  
  9. font-size: 23px;  
  10. }  
  11. #table1 {  
  12. background-color: #e4055d;  
  13. }  
  14. #table1 tr {  
  15. background-color: #68dcfb;  
  16. }  
  17. #table1 tr:first-child {  
  18. background-color: gold;  
  19. }  
  20. #table1 tr td, #table1 tr th {  
  21. padding: 5px;  
  22. }  
  23. #table1 tr:hover {  
  24. background-color: #21b1d8;  
  25. cursor: pointer;  
  26. }  
  27. #table1 .newrow {  
  28. background-color: #317bf1;  
  29. }  
  30. #table1 input[type=text] {  
  31. width: 200px;  
  32. border: 2px solid blue;  
  33. }  
  34. table {  
  35. border-collapse: collapse;  
  36. }  
  37. table th, table td {  
  38. padding: 3px;  
  39. }  
  40. table th:hover {  
  41. cursor: pointer;  
  42. }  
  43. .arrow-down:after, .arrow-up:after {  
  44. content: ' ';  
  45. position: relative;  
  46. left: 2px;  
  47. border: 8px solid transparent;  
  48. }  
  49. .arrow-down:after {  
  50. top: 10px;  
  51. border-top-color: black;  
  52. }  
  53. .arrow-up:after {  
  54. bottom: 15px;  
  55. border-bottom-color: black;  
  56. }  
  57. .arrow-down, .arrow-up {  
  58. padding-right: 10px;  
  59. }  
  60. </style>  
  61. <script src="angular.js"></script>  
  62. <script>  
  63. var app = angular.module("mymodule", []);  
  64. app.controller("mycontroller", function ($scope, $http) {  
  65. $scope.showloading = true;  
  66. $scope.mastercheckboxchecked = false;  
  67. $scope.employees = [];  
  68. $http.get("api/EmployeesApi/get").success(function (response) {  
  69. for (var i = 0; i < response.length; i++) {  
  70. $scope.employees.push({ "EmpID": response[i].EmpID, "EmpName": response[i].EmpName, "Salary": response[i].Salary, "IsSelected": false, "showedit": false });  
  71. }  
  72. $scope.showloading = false;  
  73. }).error(function (err) { alert(JSON.stringify(err)); });  
  74. var emplist = [];  
  75. $scope.additems = function (emp) {  
  76. var resemp = emplist.find(empiitem => empiitem.EmpID === emp.EmpID);  
  77. var empindex = emplist.indexOf(resemp);  
  78. if (resemp && resemp.EmpID) {  
  79. emplist.splice(empindex, 1);  
  80. } else {  
  81. emplist.push(emp);  
  82. }  
  83. console.log(emplist);  
  84. }  
  85. $scope.submit = function () {  
  86. var list = []  
  87. var emp = {  
  88. "EmpID": "",  
  89. "EmpName": "",  
  90. "Salary": ""  
  91. }  
  92. angular.forEach(emplist, function (value, index) {  
  93. emp.EmpID = value.EmpID;  
  94. emp.EmpName = value.EmpName;  
  95. emp.Salary = value.Salary;  
  96. list.push(emp);  
  97. });  
  98. $http.post("../api/emp2/Post", list).success(function (response) {  
  99. alert('inserted...')  
  100. }).error(function (err) { alert(JSON.stringify(err)); });  
  101. }  
  102. $scope.mastercheckboxclicked = function () {  
  103. if ($scope.mastercheckboxchecked) {  
  104. for (var i = 0; i < $scope.employees.length; i++) {  
  105. $scope.employees[i].IsSelected = true;  
  106. }  
  107. }  
  108. else {  
  109. for (var i = 0; i < $scope.employees.length; i++) {  
  110. $scope.employees[i].IsSelected = false;  
  111. }  
  112. }  
  113. };  
  114. $scope.reverseSort = false;  
  115. $scope.currentPage = 0;  
  116. $scope.pageSize = 4;  
  117. $scope.numberOfPages = function () {  
  118. return Math.ceil($scope.employees.length / $scope.pageSize);  
  119. }  
  120. });  
  121. app.filter('startFrom', function () {  
  122. return function (input, start) {  
  123. start = +start; //parse to int  
  124. return input.slice(start);  
  125. }  
  126. });  
  127. </script>  
  128. </head>  
  129. <body>  
  130. <h1>AngularJS - Ajax - Grid</h1>  
  131. <div ng-app="mymodule" ng-controller="mycontroller">  
  132. <div class="">  
  133. Search EmpID:<input type="text" class="" ng-model="search.EmpID" placeholder="Employee ID" ng-change="numberOfPages()"/>  
  134. Search EmpName:<input type="text" class="" ng-model="search.EmpName" placeholder="Employee Name" ng-change="numberOfPages()"/>  
  135. </div><br />  
  136. <img src="Images/ajax-loader.gif" ng-show="showloading" />  
  137. <table border="1" id="table1">  
  138. <tr>  
  139. <th><input type="checkbox" ng-model="mastercheckboxchecked" ng-change="mastercheckboxclicked()" /></th>  
  140. <th ng-click="orderByField='EmpID'; reverseSort = !reverseSort">Emp ID</th>  
  141. <th ng-click="orderByField='EmpName'; reverseSort = !reverseSort" >Emp Name</th>  
  142. <th ng-click="orderByField='Salary'; reverseSort = !reverseSort">Salary</th>  
  143. </tr>  
  144. <!--<tr ng-repeat="emp in employees | filter : {'EmpID': searchid}">-->  
  145. <tr ng-repeat="emp in employees | filter : search | orderBy:orderByField:reverseSort | startFrom:currentPage*pageSize | limitTo:pageSize">  
  146. <td><input type="checkbox" ng-model="emp.IsSelected" ng-click="additems(emp)" /></td>  
  147. <td>  
  148. <span ng-show="!emp.showedit">{{emp.EmpID}}</span>  
  149. </td>  
  150. <td>  
  151. <span ng-show="!emp.showedit">{{emp.EmpName}}</span>  
  152. </td>  
  153. <td>  
  154. <span ng-show="!emp.showedit">{{emp.Salary}}</span>  
  155. </td>  
  156. </tr>  
  157. </table><br />  
  158. <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">  
  159. Previous  
  160. </button>  
  161. {{currentPage+1}}/{{numberOfPages()}}  
  162. <button ng-disabled="currentPage >= employees.length/pageSize - 1" ng-click="currentPage=currentPage+1">  
  163. Next  
  164. </button>  
  165. </br>  
  166. </br>  
  167. <input type="button" value="Make Elgible" ng-click="submit()" />  
  168. </div>  
  169. </body>  
  170. </html>

Answers (1)