数据源
1 $scope.data=[ 2 {num:1234,name:"ipad",price:3400.00,count:10}, 3 {num:1235,name:"iphone",price:6400.00,count:100}, 4 {num:1236,name:"mypad",price:4400.00,count:20}, 5 {num:1237,name:"zpad",price:8400.00,count:130}, 6 {num:1238,name:"mp3",price:100.00,count:200} 7 ];
Html的样式
1 <body ng-app="myapp" ng-controller="myCtrl"> 2 <header><input type="text" ng-model="seartext"> <button ng-click="clear()">批量删除</button></header> 3 <table> 4 <tr> 5 <th><input type="checkbox" id="all"></th> 6 <th>商品编号</th> 7 <th ng-click="sortName()" class="name">商品名称</th> 8 <th>商品价格</th> 9 <th>商品库存</th> 10 <th>数据操作</th> 11 </tr> 12 <tr ng-repeat="item in data | filter:seartext |orderBy:'name':setSort"> 13 <td><input type="checkbox" name="checkbox"></td> 14 <td>{{ item.num }}</td> 15 <td>{{ item.name }}</td> 16 <td>{{ item.price | currency:"￥:"}}</td> 17 <td>{{ item.count }}</td> 18 <td><button ng-click="delete($index)">删除</button></td> 19 </tr> 20 </table> 21 </body>
1.先利用ng-repeat="item in data”将数据展示出来,
2.利用过滤器实现模糊查询 filter:seartext （），<input type="text" ng-model="seartext">根据ng-model来得到输入框的值，
3.利用过滤器currency:"￥:”在价格前面加上符号.
4.删除一条数据,
1 /*删除单一条目*/ 2 $scope.delete=function (index) { 3 if(confirm("确定要删除此项?")){ 4 $scope.data.splice(index,1); 5 } 6 };
html上写一个按钮，并将当前条目的下标传给删除方法
1 <button ng-click="delete($index)">删除</button></td>
5.批量删除
1 /*批量删除*/ 2 $scope.clear=function () { 3 /*没有选中多选框时*/ 4 if($("input:checkbox").is(":checked")){ 5 if($("#all").is(":checked")){ 6 // 删除所有 7 if(confirm("是否删除所有页面信息?")){ 8 $scope.data.splice(0,$scope.data.length); 9 } 10 } 11 }else{ 12 alert("得先选中要删除的商品!"); 13 } 14 }
6.排序
1 /*排序*/ 2 $scope.setSort=true; 3 $scope.sortName=function () { 4 /*点击字体变色*/ 5 $(".name").click(function () { 6 $(this).css("color","red"); 7 }); 8 if($scope.setSort==true){ 9 $scope.setSort=!$scope.setSort; 10 }else{ 11 $scope.setSort=!$scope.setSort; 12 } 13 }
7.利用jqueary全选
1 /*全选*/ 2 $("#all").click(function () { 3 if($(this).is(":checked")){ 4 $(":checkbox").prop("checked",true); 5 }else{ 6 $(":checkbox").prop("checked",false); 7 } 8 })
全部的代码
1 <script> 2 $(function () { 3 /*全选*/ 4 $("#all").click(function () { 5 if($(this).is(":checked")){ 6 $(":checkbox").prop("checked",true); 7 }else{ 8 $(":checkbox").prop("checked",false); 9 } 10 }) 11 }) 12 13 14 </script> 15 <script> 16 var myapp=angular.module("myapp",[]); 17 myapp.controller("myCtrl",function ($scope) { 18 $scope.data=[ 19 {num:1234,name:"ipad",price:3400.00,count:10}, 20 {num:1235,name:"iphone",price:6400.00,count:100}, 21 {num:1236,name:"mypad",price:4400.00,count:20}, 22 {num:1237,name:"zpad",price:8400.00,count:130}, 23 {num:1238,name:"mp3",price:100.00,count:200} 24 ]; 25 /*删除单一条目*/ 26 $scope.delete=function (index) { 27 if(confirm("确定要删除此项?")){ 28 $scope.data.splice(index,1); 29 } 30 }; 31 32 /*批量删除*/ 33 $scope.clear=function () { 34 /*没有选中多选框时*/ 35 if($("input:checkbox").is(":checked")){ 36 if($("#all").is(":checked")){ 37 // 删除所有 38 if(confirm("是否删除所有页面信息?")){ 39 $scope.data.splice(0,$scope.data.length); 40 } 41 } 42 }else{ 43 alert("得先选中要删除的商品!"); 44 } 45 } 46 /*排序*/ 47 $scope.setSort=true; 48 $scope.sortName=function () { 49 /*点击字体变色*/ 50 $(".name").click(function () { 51 $(this).css("color","red"); 52 }); 53 if($scope.setSort==true){ 54 $scope.setSort=!$scope.setSort; 55 }else{ 56 $scope.setSort=!$scope.setSort; 57 } 58 } 59 60 }) 61 62 </script>