HBuilder中的遍历添加数据+全选+删除+批量删除+更改+排序

来源：互联网发布：mariaarredondo 知乎编辑：程序博客网时间：2024/06/18 15:24
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>模拟</title><script type="text/javascript" src="../kuwenjian/angular.js" ></script><script>var app = angular.module("myapp",[]);app.controller("mycon",function($scope){$scope.mohu="";$scope.pxfs="";$scope.qxz="--请选择--";$scope.orderFlag="";$scope.orderLine="";$scope.xinshuzu=[];//点击删除执行的方法$scope.dleone=function(bian){for(var i=0;i<$scope.data.length;i++){if($scope.data[i].bianhao==bian){$scope.data.splice(i,1);}}}//点击更改执行的方法$scope.updeteprice=function(price){for(var i=0;i<$scope.data.length;i++){if($scope.data[i].jiage==price){var updprice = parseInt(window.prompt("请输入要修改的价格",price));if(updprice < 0) {alert("输入有误，请重新更改");} else {if(window.confirm("确定要将" + $scope.data[i].mingcheng + "的价格更改为：" + updprice + "吗？")) {$scope.data[i].jiage = updprice;}}}}}$scope.aaa=function(nan){$scope.pxfs = nan;if($scope.orderFlag == ""){$scope.orderFlag = "-";}else{$scope.orderFlag = "";}}//全选按钮的判断$scope.seleall="";$scope.selectAllFun = function() {if($scope.seleall) {for(index in $scope.data) {$scope.data[index].state = true;}} else {for(index in $scope.data) {$scope.data[index].state = false;}}}////反选  //$scope.checkSelecetAll = function() {//var flag = false;////遍历数组，获得对象的状态//for(index in $scope.data) {////alert($scope.products[index].state);////如果有一个对象状态是false即未选中状态，就把标志位flag变为true。//if(!$scope.data[index].state){//flag = true;//}//}////判断是否没有一个是未选中状态//if(flag){//这是正面至少有一个未选中//$scope.seleall = false;//全选状态为false//}else{//一定是全部被选中//$scope.seleall = true;//全选状态为true//}//}$scope.plsc=function(){for(inde in $scope.data){if($scope.data[inde].state){$scope.xinshuzu.push($scope.data[inde]);}}for(xin in $scope.xinshuzu){var ff = $scope.xinshuzu[xin].bianhao;for(inde in $scope.data){var ssc = $scope.data[inde].bianhao;if(ssc==ff){$scope.data.splice(inde,1)}}}}//全选按钮的判断$scope.seletwo = function() {var flag =true;for(index in $scope.data) {if($scope.data[index].state==false){flag=false;}}if(flag){$scope.seleall=true;}else{$scope.seleall=false;}}$scope.data=[{bianhao:80,mingcheng:"iphone",jiage:5400,state: false},{bianhao:290,mingcheng:"ipad",jiage:1420,state: false},{bianhao:500,mingcheng:"ipad air",jiage:2340,state: false},{bianhao:910,mingcheng:"imac",jiage:15400,state: false},{bianhao:1200,mingcheng:"ipad mini",jiage:2200,state: false}];$scope.ifShow = function(price){if($scope.qxz == "--请选择--"){return true;}else{var arr = $scope.qxz.split("-");var priceMin = arr[0];var priceMax = arr[1];if(price<priceMin || price>priceMax){//alert("111");return false;}else{return true;}}}});</script></head><body ng-app="myapp" ng-controller="mycon"><center><h2>购物车</h2><input type="text" placeholder="产品名称" ng-model="mohu" />产品价格 <select ng-model="qxz"><option>--请选择--</option><option>0-2000</option><option>2001-3000</option><option>4001-5000</option><option>5001-6000</option><option>6001-7000</option></select><select ng-model="pxfs"><option value="">排序方式 </option><option value="bianhao">id正序</option><option value="-bianhao">id逆序</option><option value="jiage">价格正序</option><option value="-jiage">价格逆序</option></select><button ng-click="plsc()">批量删除</button><table style="border: 1px solid black; width: auto;" border="1px" cellpadding="10" cellspacing="1"><tr><td><input type="checkbox" ng-model="seleall" ng-click="selectAllFun()"/></td><td ng-click="aaa('bianhao')">产品编号</td><td ng-click="aaa('mingcheng')">产品名称</td><td ng-click="aaa('jiage')">产品价格</td><td>操作</td></tr><tr ng-repeat="inde in data | filter:mohu |orderBy:(orderFlag+pxfs)" ng-if="ifShow(inde.jiage)"><td><input type="checkbox" ng-model="inde.state" ng-click="seletwo()"/></td><td>{{inde.bianhao}}</td><td>{{inde.mingcheng}}</td><td>{{inde.jiage}}</td><td><button ng-click="dleone(inde.bianhao)">删除</button> <button ng-click="updeteprice(inde.jiage)">修改</button></td></tr></table></center></body></html>
阅读全文
0 0