angular 操作

来源：互联网发布：三维人体模型设计软件编辑：程序博客网时间：2024/06/16 20:40

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.js"></script> <script> var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope){ var kk=new Date(); //数组 $scope.goods=[{ id:2001, goodsName:"iPhoneX", name:"张三", tel:13525565588, price:8699, city:"北京", xiadanTime:kk, fahuoState:true, state:false },{ id:3006, goodsName:"iPhone6", name:"王红", tel:18524565588, price:5635, city:"郑州", xiadanTime:kk, fahuoState:true, state:false },{ id:5312, goodsName:"iPhone7", name:"赵小龙", tel:17545585598, price:6180, city:"北京", xiadanTime:kk, fahuoState:false, state:false },{ id:2132, goodsName:"iPhone8", name:"赵强", tel:17625565618, price:7190, city:"上海", xiadanTime:kk, fahuoState:false, state:false }]; //显示隐藏表单 $scope.isShow=false; $scope.show=function(){ if($scope.isShow){ $scope.isShow=false; }else{ $scope.isShow=true; } } //改变状态 $scope.changeOrderState=function(gg){ gg.fahuoState=true; } //批量删除 $scope.deleteSel=function(){ var newArr=[]; for(index in $scope.goods){ if($scope.goods[index].state){ if($scope.goods[index].fahuoState){ newArr.push($scope.goods[index]); } } } if(newArr.length > 0){ for(index in newArr){ for(index2 in $scope.goods){ if(newArr[index] == $scope.goods[index2]){ $scope.goods.splice(index2,1); } } } }else{ alert("请先选择被选择的已发货商品"); } } //全选全不选 $scope.selectAll=false; $scope.selectAllFun=function(){ if($scope.selectAll){ for(index in $scope.goods){ $scope.goods[index].state=true; } }else{ for(index in $scope.goods){ $scope.goods[index].state=false; } } } //点击排序 $scope.flag = ""; $scope.column = "id"; $scope.orderColumn = function(){ if($scope.flag == ""){ $scope.flag = "-"; }else{ $scope.flag = ""; } } //添加 $scope.addData=function(){ var flag1=flag2=flag3=flag4=flag5=flag6=false; //商品名称验证 if($scope.newGoodsName == "" || $scope.newGoodsName == null){ alert("商品名称不能为空"); flag1=false; }else{ flag1=true; } //用户名验证 if($scope.newName == "" || $scope.newName == null){ alert("用户名不能为空"); flag2=false; }else{ flag2=true; } var flag=false; for(index in $scope.goods){ if($scope.newName == $scope.goods[index].name){ flag=true; } } if(flag){ alert("用户名重复"); flag6=false; }else{ flag6=true; } //手机号验证 if($scope.newTel == "" || $scope.newTel == null){ alert("手机号不能为空"); flag3=false; }else if($scope.newTel.length !=11){ alert("手机号位数不正确"); flag3=false; }else{ flag3=true; } //价格验证 if($scope.newPrice == "" || $scope.newPrice == null){ alert("价格不能为空"); flag4=false; }else if(isNaN($scope.newPrice)){ alert("价格必须为数字"); flag4=false; }else{ flag4=true; } //城市验证 if($scope.newCity == "" || $scope.newCity == null){ alert("城市必选"); flag5=false; }else{ flag5=true; } if(flag1 && flag2 && flag3 && flag4 &&flag5){ $scope.goods.push({ id:3456, goodsName:$scope.newGoodsName, name:$scope.newName, tel:$scope.newTel, price:$scope.newPrice, city:$scope.newCity, xiadanTime:kk, fahuoState:false, state:false }); } } }); </script> <style> button{background-color: deepskyblue;} td{text-align: center;} tr:nth-child(even){background-color: red;} tr:nth-child(odd){background-color: yellow;} </style> </head> <body ng-app="myApp" ng-controller="myCtrl"><br /> <center> <button ng-click="show()">新增订单</button> <button ng-click="deleteSel()">批量删除</button> <input type="text"placeholder="按商品名称查询"style="margin-left: 40px;"ng-model="searchName"/> <input type="text"placeholder="按手机号查询"ng-model="searchTel"/> <select ng-model="orderStateSel"> <option value="">--按状态查询--</option> <option value="true">已发货</option> <option value="false">未发货</option> </select><br /><br /> <table border="1px solid black" cellpadding="10"cellspacing="0"width="1000px"> <thead> <tr style="background-color: gray;"> <th><inputtype="checkbox"ng-click="selectAllFun()"ng-model="selectAll"></th> <th>id<buttonng-click="orderColumn()">排序</button></th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格<buttonng-click="orderColumn()">排序</button></th> <th>城市</th> <th>下单时间<buttonng-click="orderColumn()">排序</button></th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="gg in goods | filter:{goodsName:searchName,tel:searchTel,fahuoState:orderStateSel} | orderBy:(flag+column)"> <td><inputtype="checkbox"ng-model="gg.state"></td> <td>{{gg.id}}</td> <td>{{gg.goodsName}}</td> <td>{{gg.name}}</td> <td>{{gg.tel}}</td> <td>{{gg.price | currency:"RMB "}}</td> <td>{{gg.city}}</td> <td>{{gg.xiadanTime | date:"MM/dd hh:mm:ss"}}</td> <td><buttonstyle="background-color: green; border: none;"ng-show="gg.fahuoState"disabled="disabled">已发货</button> <button style="background-color: yellow; border: none;"ng-show="!gg.fahuoState"ng-click="changeOrderState(gg)">未发货</button></td> </tr> </tbody> </table><br /> <form style="border:1px solid blue ; width: 1000px;"ng-show="isShow"> <h3>添加订单信息</h3><br /> 商品名:<input type="text" style="width: 600px;" ng-model="newGoodsName" /><br /><br /> 用户名:<input type="text" style="width: 600px;" ng-model="newName"/><br /><br /> 手机号:<input type="text" style="width: 600px;" ng-model="newTel"/><br /><br /> 价格为:<input type="text" style="width: 600px;" ng-model="newPrice"/><br /><br /> 城市:<select style="width: 600px;" ng-model="newCity"> <option>--请选择城市--</option> <option>北京</option> <option>南京</option> <option>上海</option> </select><br /><br /> <input type="button" value="保存" ng-click="addData()"/> </form> </center> </body> </html>

阅读全文

0 0