效果图：
css代码：
1. <style> 2. div{ 3. width: 400px; 4. height:300px ; 5. background: #ccc; 6. } 7. div p{ 8. width: 300px; 9. height: 30px; 10. margin: 0 auto; 11. margin-top: 20px; 12. } 13. div input{ 14. width: 200px; 15. height: 30px; 16. } 17. div button{ 18. display: block; 19. margin: 0 auto; 20. margin-top: 20px; 21. width: 100px; 22. height: 30px; 23. } 24. </style>
html代码：
1. <body ng-app="myApp" ng-controller="myCtrl"> 2. <button ng-click="qx()">全选</button> 3. <button ng-click="fx()">反选</button> 4. <button ng-click="qbx()">全不选</button> 5. <button ng-click="plsc()">批量删除</button> 6. <button ng-click="allDel()">清空购物车</button> 7. <button ng-click="add()">添加</button> 8. <button ng-click="dx(price)">倒序</button> 9. <input type="text" placeholder="请输入名称" ng-model="search" /> 10. <table border="1" width="100%" > 11. <tr> 12. <th>选项 </th> 13. <th>名称</th> 14. <th>产地</th> 15. <th>数量</th> 16. <th>生产时间</th> 17. <th>单价</th> 18. <th>小计</th> 19. <th>操作</th> 20. </tr> 21. 22. <tr ng-repeat="x in goods | filter:{gname:search} | orderBy:order+orderType"> 23. <td><input type="checkbox" ng-model="x.ck" /> </td> 24. <td>{{x.gname}}</td> 25. <td>{{x.address}}</td> 26. <td> 27. <input type="button" value="-" ng-click="jian($index)" /> 28. <span>{{x.num}}</span> 29. <input type="button" value="+" ng-click="jia($index)" /> 30. </td> 31. <td> 32. {{x.regDate|date:'yyyy-MM-dd hh:mm:ss'}} 33. </td> 34. <td> 35. {{x.price | currency :"￥"}} 36. </td> 37. <td> 38. {{x.num * x.price | currency:"￥"}} 39. </td> 40. <td> 41. <input type="button" value="删除" ng-click="del($index)" /> 42. <input type="button" value="修改" ng-click="upda($index)" /> 43. 44. </td> 45. </tr> 46. <tr> 47. <td colspan="8"> 48. <span>总价</span> 49. <span ng-bind="allSum()|currency:'￥'"></span> 50. </td> 51. </tr> 52. </table> 53. <!--添加操作--> 54. <div ng-show="addShow" > 55. <p>名称 ： <input ng-model="name" type="text" placeholder="请输入名称" /></p> 56. <p>产地 ： <input ng-model="addre" type="text" placeholder="请输入产地" /></p> 57. <p>价格 ： <input ng-model="prices" type="text" placeholder="请输入价格" /></p> 58. <button ng-click="trueAdd()">确认添加</button> 59. </div> 60. 61. <!--修改操作--> 62. <div ng-show="updShow" > 63. <p>名称 ： <input ng-model="obj.name" type="text" placeholder="请输入名称" /></p> 64. <p>产地 ： <input ng-model="obj.addre" type="text" placeholder="请输入产地" /></p> 65. <p>价格 ： <input ng-model="obj.prices" type="text" placeholder="请输入价格" /></p> 66. <button ng-click="trueUpd()">确认修改</button> 67. </div> 68. </body>
angular代码：
1. var vm=angular.module('myApp',[]) 2. vm.controller('myCtrl',function($scope,$http){ 3. //如果需要调用外部数据，在scope 后面加上 http 服务 4. $http.get("yao.json").then(function(res){ 5. $scope.goods=res.data 6. //修改数据 7. //定义一个空对象 接受临时数据 8. $scope.obj={} 9. //定义一个索引值 10. var idx=-1 11. $scope.upda=function($index){ 12. $scope.updShow=true 13. //将goods里面对应的数据放到obj中 14. $scope.obj.name=$scope.goods[$index].gname 15. $scope.obj.addre=$scope.goods[$index].address 16. $scope.obj.prices=$scope.goods[$index].price 17. 18. idx=$index 19. } 20. //数据修改 21. $scope.trueUpd=function(){ 22. 23. $scope.goods[idx].gname=$scope.obj.name 24. $scope.goods[idx].address=$scope.obj.addre 25. $scope.goods[idx].price=$scope.obj.prices 26. $scope.updShow=false 27. 28. 29. 30. } 31. 32. 33. //添加 34. $scope.add=function(){ 35. $scope.addShow=true 36. 37. } 38. 39. //定义当前时间 40. // var theTime=new Date().toLocaleTimeString() 41. 42. //确认添加逻辑实现 43. $scope.trueAdd=function(){ 44. //赋值操作 45. var name= $scope.name 46. var addre= $scope.addre 47. var prices= $scope.prices 48. 49. //添加操作 50. $scope.goods.push({ 51. gname:name, 52. address:addre, 53. price:prices, 54. num:1, 55. regDate:1371120093221 56. 57. }) 58. 59. //数据清空 60. $scope.name="" 61. $scope.addre ="" 62. $scope.prices ="" 63. 64. $scope.addShow=false 65. 66. } 67. 68. //总价 69. $scope.allSum=function(){ 70. var allProce=0 71. 72. for (var i=0 ;i<$scope.goods.length;i++) { 73. allProce+=$scope.goods[i].price * $scope.goods[i].num 74. 75. } 76. return allProce 77. 78. } 79. 80. //倒序 81. $scope.order="" 82. $scope.dx=function(type){ 83. $scope.orderType=type 84. if ($scope.order=="") { 85. $scope.order="-" 86. } else{ 87. $scope.order="" 88. } 89. } 90. 91. 92. //数据加减 93. //加 94. $scope.jia=function(index){ 95. $scope.goods[index].num++ 96. 97. } 98. //减 99. $scope.jian=function(index){ 100. 101. if ($scope.goods[index].num>1) { 102. $scope.goods[index].num-- 103. } else{ 104. $scope.goods.splice(index,1) 105. } 106. 107. } 108. 109. //清空购物车 110. $scope.allDel=function(){ 111. 112. if ($scope.goods.length==0) { 113. alert("购物车为空") 114. } else{ 115. $scope.goods=[] 116. } 117. 118. 119. } 120. 121. //批量删除 122. $scope.plsc=function(){ 123. if (confirm("确定要删除吗？？")) { 124. 125. 126. for (var i=0 ; i<$scope.goods.length ; i++) { 127. if ($scope.goods[i].ck==true) { 128. $scope.goods.splice(i,1) 129. i-- 130. } 131. 132. } 133. } 134. } 135. 136. 137. //单个删除 138. 139. $scope.del=function(index){ 140. 141. $scope.goods.splice(index,1) 142. } 143. 144. 145. //全选 146. 147. $scope.qx=function(){ 148. for (var i=0 ; i<$scope.goods.length ;i++) { 149. var x=$scope.goods[i] 150. x.ck=true 151. 152. } 153. 154. 155. } 156. 157. //反选 158. 159. $scope.fx=function(){ 160. for (var i=0 ; i<$scope.goods.length ;i++) { 161. var x=$scope.goods[i] 162. if (x.ck==x.ck) { 163. x.ck=!x.ck 164. } 165. 166. } 167. 168. 169. } 170. 171. //全不选 172. $scope.qbx=function(){ 173. for (var i=0 ; i<$scope.goods.length ;i++) { 174. var x=$scope.goods[i] 175. if (x.ck==x.ck) { 176. x.ck=false 177. } 178. 179. } 180. 181. 182. } 183. 184. 185. }) 186. 187. })
ok！！！
