混合开发（4）
<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <style> /*隔行变色*/ .css1 { background-color: antiquewhite; } .css2 { background-color: burlywood; } /*按钮变小手*/ .sb { cursor: pointer; } </style> <script type="application/javascript" src="js/angular.min.js"></script> <script> var app =angular.module("myApp",[]); app.controller("myCtrl",function($scope){ //加入假数据 $scope.datas =[ { id:1001, name:"iphone7", price:6888, num:1, state:false }, { id: 1002, name: "iphone8", price: 7888, num: 1, state: false }, { id: 1003, name: "iphoneX", price: 8888, num: 1, state: false } ]; //点击根据名字删除掉 $scope.del = function(na) { if(window.confirm("你确定删除" + na + "吗")) { for(index in $scope.datas) { if(na == $scope.datas[index].name) { $scope.datas.splice(index, 1); } } } } //点击-号减去数量 $scope.jian = function(index){ if($scope.datas[index].num>1){ $scope.datas[index].num--; }else{ alert("不能再减了！你可以删除商品") } } //+号添加商品 $scope.jia = function(index){ $scope.datas[index].num++; } //总价格 $scope.prices = function(){ var p = 0; for(var x = 0;x<$scope.datas.length;x++){ p +=$scope.datas[x].num*$scope.datas[x].price; } return p; } //总数量 $scope.content = function(){ var p = 0; for (var x = 0;x<$scope.datas.length;x++) { p+=$scope.datas[x].num; } return p ; } //添加页面 $scope.add = function(){ var flag1 = false; var flag2 = false; var flag3 = false; var flag4 = false; //判断非空 必须为数字 if($scope.ID==""||$scope.ID == null){ alert("id不能为空"); flag1 = false }else if(isNaN($scope.ID)){ alert("id必须为数字"); flag1= false; }else{ flag1 = true; } if($scope.IDname == "" || $scope.IDname == null) { alert("商品不能为空"); flag2 = false; } else { flag2 = true; } if($scope.IDnum == "" || $scope.IDnum == null) { alert("数量不能为空"); flag3 = false; } else if(isNaN($scope.IDnum)) { alert("数量必须为数字"); flag3 = false; } else { flag3 = true; } if($scope.IDprice == "" || $scope.IDprice == null) { alert("单价不能为空"); flag4 = false; } else if(isNaN($scope.IDprice)) { alert("单价必须为数字"); flag4 = false; } else { flag4 = true; } //点击添加 显示数据 if(flag1 && flag2 && flag3&&flag4){ $scope.datas.push({ id:$scope.ID, name:$scope.IDname, num:$scope.IDnum, price:$scope.IDprice }); } } //全选反选 $scope.selectAll = false; $scope.selectAllFun= function(){ if($scope.selectAll){ for (index in $scope.datas) { $scope.datas[index].state = true; } }else{ for (index in $scope.datas) { $scope.datas[index].state = false; } } } //批量删除 $scope.delSelect = function(){ var arr = []; for (index in $scope.datas) { if($scope.datas[index].state){ arr.push($scope.datas[index].name); } } if(arr.length<=0){ alert("请重新选择删除的项目"); }else{ if(window.confirm("确定要删除吗？")){ for(index in arr){ for (index2 in $scope.datas) { if (arr[index]==$scope.datas[index2].name) { $scope.datas.splice(index2,1); } } } }else{ alert("您已取消删除"); } } } //修改页面 $scope.updateShow = false; $scope.updateId = ""; $scope.updateName = ""; $scope.updateNum = ""; $scope.updatePrice = ""; $scope.updateShowFun = function(aa){ if(window.confirm("你确定要修改吗？")){ $scope.updateShow = true; $scope.updateId = aa.id; $scope.updateName = aa.name; $scope.updateNum = aa.num; $scope.updatePrice = aa.price; }else{ alert("你已经取消了修改"); } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <!-- <center>--> <input type="text" placeholder="请输入查询商品" ng-model="search"/>数量排序： <select ng-model="selOrder"> <option value="num">数量正序</option> <option value="num">数量倒序</option> </select> <button ng-click="delSelect()" class="sb">批量删除</button><br /> <table border="1px" cellpadding="0" cellspacing="0"> <thead> <tr align="center" style="background-color: aqua;"> <td><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></td> <td width="100px">商品编号</td> <td width="100px">商品名称</td> <td width="230px">商品数量</td> <td width="100px">商品单价</td> <td width="100px">商品总价</td> <td width="110px">商品操作</td> </tr> </thead> <tbody> <tr ng-repeat="a in datas | filter:{name:search}| orderBy:selOrder " class="{{ $even ? 'css1':'css2'}}" align="center"> <td><input type="checkbox" ng-model="a.state" /></td> <td>{{a.id}}</td> <td>{{a.name}}</td> <td> <button ng-click="jian($index)">-</button> <input type="text" ng-model="a.num" /> <button ng-click="jia($index)">+</button> </td> <td>{{a.price}}</td> <td>{{a.price*a.num}}</td> <td><button ng-click="del(a.name)" class="sb">删除</button> <button ng-click="updateShowFun(a)" class="sb">修改</button> </td> </tr> </tbody> </table> <h3>总金额:{{prices()}} 总数量:{{content()}}</h1> <form style="border: 1px solid yellow; width: 300px;"> <h3>添加商品</h3> 商品编号:<input type="text" ng-model="ID"/><br /><br /> 商品名称:<input type="text" ng-model="IDname"/><br /><br /> 商品数量:<input type="text" ng-model="IDnum"/><br /><br /> 商品单价:<input type="text" ng-model="IDprice"/><br /><br /> <button ng-click="add()" class="sb">添加</button> </form> <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow"> <h3>修改商品</h3> 商品编号: <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称: <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品数量: <input type="text" placeholder="商品数量" ng-model="updateNum" /><br /><br /> 商品单价: <input type="text" placeholder="商品单价" ng-model="updatePrice" /><br /><br /> <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="yz"> <ul> <li ng-repeat="chenk in updateArr">{{chenk}}</li> </ul> </div><br /> <input type="button" value="提交" ng-click="updateSub()" class="sb" /> </form> <!--</center>--> </body> </html>