数据源
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 （），根据ng-model来得到输入框的值，
3.利用过滤器currency:"￥:”在价格前面加上符号.
4.删除一条数据,
1 /*删除单一条目*/ 2 $scope.delete=function (index) { 3 if(confirm("确定要删除此项?")){ 4 $scope.data.splice(index,1); 5 } 6 };
html上写一个按钮，并将当前条目的下标传给删除方法
1
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 15