效果图如下：
html代码如下：
1. <body ng-app="myApp" ng-controller="myCtrl"> 2. <button ng-click="dx(seq)">倒序</button> 3. <button ng-click="qx()">全选</button> 4. <button ng-click="fx()">反选</button> 5. <button ng-click="nontx()">全不选</button> 6. <button ng-click="allDel()">全部删除</button> 7. <button ng-click="pi()">批量删除</button> 8. <input ng-model="search" type="text" placeholder="请输入姓名" /> 9. <input ng-model="city" type="text" placeholder="请输入国家" /> 10. 11. <table width="800" border="1"> 12. <tr align="center"> 13. <td >全选</td> 14. <td>序号</td> 15. <td>国家</td> 16. <td>名字</td> 17. <td>年龄</td> 18. <td>删除</td> 19. </tr> 20. <tr align="center" ng-repeat="x in lists | orderBy:order+orderBy | filter :{country:search}|filter:{name:city}"> 21. <td><input type="checkbox" ng-model="x.ck" /></td> 22. <td>{{x.seq}}</td> 23. <td>{{x.name}}</td> 24. <td>{{x.country}}</td> 25. <td>{{x.age}}</td> 26. <td><button ng-click="del($index)"> 删除</button></td> 27. </tr> 28. 29. </table> 30. 31. </body>
js代码如下：
1. var vm=angular.module('myApp',[]) 2. vm.controller('myCtrl',function($scope){ 3. $scope.lists=[ 4. { seq: 1, name: "魏国", country: "曹操",age : 45 ,state:'false'}, 5. { seq: 2, name: "魏国", country: "张辽" ,age: 34,state:'false'}, 6. { seq: 3, name: "魏国", country: "司马懿" ,age: 36,state:'false' }, 7. { seq: 4, name: "魏国", country: "夏侯淳",age: 40,state:'false' }, 8. { seq: 5, name: "蜀国", country: "刘备",age: 50,state:'false' }, 9. { seq: 6, name: "蜀国", country: "关羽",age: 45,state:'false' }, 10. { seq: 7, name: "蜀国", country: "张飞",age: 46,state:'false' }, 11. { seq: 8, name: "蜀国", country: "赵云",age: 35,state:'false' }, 12. { seq: 9, name: "吴国", country: "孙权" ,age: 30,state:'false' }, 13. { seq: 10, name: "吴国", country: "周瑜",age: 32 ,state:'false'}, 14. { seq: 11, name: "吴国", country: "鲁肃",age: 33,state:'false' }, 15. { seq: 12, name: "吴国", country: "黄盖",age: 55,state:'false' } 16. 17. ] 18. // 倒序 19. $scope.order=" " 20. $scope.dx=function(type){ 21. $scope.orderType=type ; 22. if ($scope.order === '') { 23. $scope.order="-" 24. } else{ 25. $scope.order="" 26. } 27. 28. } 29. //全选 30. 31. $scope.qx=function(){ 32. for (var i=0 ; i<$scope.lists.length ; i++) { 33. var x=$scope.lists[i] 34. if (x.ck==x.ck) { 35. x.ck=true 36. } 37. 38. } 39. 40. 41. } 42. 43. //反选 44. $scope.fx=function(){ 45. for (var i=0 ; i<$scope.lists.length ; i++) { 46. var x=$scope.lists[i] 47. if (x.ck==x.ck) { 48. x.ck=!x.ck 49. } 50. 51. } 52. } 53. //全不选 54. $scope.nontx=function(){ 55. for (var i=0 ; i<$scope.lists.length ; i++) { 56. var x=$scope.lists[i] 57. if (x.ck==x.ck) { 58. x.ck=false 59. } 60. 61. } 62. } 63. //批量删除 64. $scope.pi=function(){ 65. // alert("是否删除此数据") 66. for (var i=0 ; i<$scope.lists.length ; i++) { 67. 68. if ($scope.lists[i].ck==true) { 69. $scope.lists.splice(i,1) 70. i--; 71. } 72. 73. 74. } 75. 76. } 77. //删除 78. $scope.del=function(index){ 79. if (confirm('确认要删除此数据吗？')) { 80. $scope.lists.splice(index,1) 81. } 82. 83. } 84. 85. //全部删除 86. $scope.allDel=function(){ 87. 88. if ($scope.lists.length == 0) { 89. alert("数据已清空") 90. } else{ 91. $scope.lists=[] 92. } 93. } 94. 95. // 添加 修改数据 96. 97. })
