商品管理（批量删除、批量发货、修改、排序）

来源：互联网发布：国民女团网络电影下载编辑：程序博客网时间：2024/06/11 16:20
代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>商品管理系统</title><script src="js/ionic.bundle.js"></script><style>table tr{border: 1px solid;}body{width: 800px;margin: 0 auto;}table tr:nth-child(2n){background-color: #CCCCCA;}</style><script>angular.module("myapp",[]).controller("demoC",function($scope){$scope.title="state";$scope.desc=false;//数组$scope.goods=[];for(var i=1;i<5;i++){var g={"checked":false,   //复选是否被选中"id":i,"gname":"云南白药"+i,"address":"云南","state":"发货","regDate":new Date(), "price":100+i};var g2={"checked":true,"id":10+i,"gname":"云南白药"+i,"address":"云南","state":"已发货","regDate":new Date("2016-"+i+"-1 3:01:02"), "price":100+i};$scope.goods.push(g);$scope.goods.push(g2);}//全选操作$scope.ckAll=function(){var ck=$scope.isck;// 表头中的复选框for(var i=0;i<$scope.goods.length;i++){$scope.goods[i].checked=ck;}}$scope.delAll=function(){var b=false; //默认么有选中的for(var i=0;i<$scope.goods.length;i++){if($scope.goods[i].checked==true){b=true;break;}}console.log("是否有选择",b);//执行删除操作if(b==true){for(var i=0;i<$scope.goods.length;i++){if($scope.goods[i].checked==true){$scope.goods.splice(i,1);i--;  //删除后,下次依然从当前索引开始}}}else{alert("请选择后操作");}}//批量发货$scope.fhAll=function(){var b=false; //默认么有选中的for(var i=0;i<$scope.goods.length;i++){if($scope.goods[i].checked==true){b=true;break;}}console.log("是否有选择",b);//执行删除操作if(b==true){for(var i=0;i<$scope.goods.length;i++){if($scope.goods[i].checked==true){$scope.goods[i].state="已发货";}}}else{alert("请选择后操作");}}//单个删除$scope.del=function(g){  //当前删除行的对象for(var i=0;i<$scope.goods.length;i++){if($scope.goods[i].id==g.id){   //查找当前删除的对象在数组中的索引$scope.goods.splice(i,1);  //}}}})</script></head><body ng-app="myapp" ng-controller="demoC"><button ng-click="delAll()">批量删除</button><button ng-click="fhAll()">批量发货</button><table border="1px"><tr style="background-color: #787876;"><td><input type="checkbox" ng-model="isck" ng-change="ckAll()" /></td><td ng-click="title='gname';desc=!desc">商品名称</td><td ng-click="title='address';desc=!desc">商品产地</td><td ng-click="title='price';desc=!desc">商品价格</td><td ng-click="title='regDate';desc=!desc">生产日期</td><td>状态</td><td>操作</td></tr><tr style="border: 1px;" ng-repeat="good in goods|orderBy:title:desc"><!--|orderBy 内置排序过滤  title  desc  是两个变量 --><td><input type="checkbox" ng-model="good.checked" /> </td><td><span ng-hide="good.edit">{{good.gname}} </span><span ng-show="good.edit==true"> <input ng-model="good.gname" />  </span></td><td>{{good.address}}</td><td>{{good.price}}</td>   <td>{{good.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>   <td>   <span ng-show="good.state=='已发货'">   {{good.state}}   </span>   <span ng-show="good.state=='发货'">   <a href="#" ng-click="good.state='已发货'">   {{good.state}}   </a>   </span>   </td>   <td>     <button ng-click="del(good)">删除</button> |         <!-- good.gai:true 显示保存 ;   -->          <button ng-hide="good.edit" ng-click="good.edit=true">修改</button>   <button ng-show="good.edit==true" ng-click="good.edit=false">保存</button>   </td>   </tr></table></body></html>
阅读全文
0 0