| <!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><input type="checkbox" ng-click="selectAllFun()" ng-model="selectAll"></th> | |
| <th>id<button ng-click="orderColumn()">排序</button></th> | |
| <th>商品名</th> | |
| <th>用户名</th> | |
| <th>手机号</th> | |
| <th>价格<button ng-click="orderColumn()">排序</button></th> | |
| <th>城市</th> | |
| <th>下单时间<button ng-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><input type="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><button style="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> |
07-31
1601
1601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
