angularJs购物汇总

来源：互联网发布：mac三级观看地址编辑：程序博客网时间：2024/04/29 16:08

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body { width: 1600px; margin: 0 auto; margin-top: 50px; text-align: center; } table { width: 1000px; margin: auto; margin-top: 50px; } div { margin: auto; margin-top: 20px; width: 500px; height: 500px; background: #c0a16b; } .b { background: red; width: 200px; height:200px; } button { background: #2aabd2; } .red { border: 1px solid red; } </style> <script src="../angular-1.5.5/angular.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.data= [ {done:false,sname:"iPhone4",name:"张三",phone:"15111111111",price:4999,city:"北京",time:"08-01 10:00",zhuai:"发货"}, {done:false,sname:"小米6",name:"李四",phone:"1522222222",price:2999,city:"北京",time:"08-02 10:00",zhuai:"发货"}, {done:false,sname:"华为P9",name:"王五",phone:"15333333333",price:3999,city:"上海",time:"09-03 10:00",zhuai:"已发货"}, {done:false,sname:"oppo r11",name:"赵六",phone:"154444444444",price:4999,city:"天津",time:"09-05 10:00",zhuai:"已收货"}, {done:false,sname:"vivo",name:"周七",phone:"15555555555",price:2999,city:"重庆",time:"10-04 10:00",zhuai:"已发货"}, ] //隐藏 $scope.show=false; //新增订单 $scope.newD=function () { $scope.show=true; } $scope.uname=""; $scope.uphone=""; $scope.ucity="选择城市"; //城市查询 $scope.citys=function (item) { if( $scope.ucity!="选择城市") { if( $scope.ucity==item.city) { return true; } else { return false; } } else { return true; } } //状态查询 $scope.uzhuai="状态"; //城市查询 $scope.zhuais=function (item) { if( $scope.uzhuai!="状态") { if( $scope.uzhuai==item.zhuai) { return true; } else { return false; } } else { return true; } } //状态变化 $scope.zhuang=function (index) { if($scope.data[index].zhuai=="发货") { $scope.data[index].zhuai="已发货"; } if($scope.data[index].zhuai=="已发货") { $scope.data[index].zhuai="已收货"; } } //排序 $scope.sortname=""; $scope.pai=function (name) { $scope.sortname=name; } //批量删除 $scope.delete=function () { var n=0; for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { $scope.data.splice(i,1); n++; i--; } } if(n==0) { alert("请勾选!!!"); } } //全选反选 $scope.check=false; $scope.checkAll=function () { for(var i=0;i<$scope.data.length;i++) { if( $scope.check==true) { $scope.data[i].done=true; } else { $scope.data[i].done=false; } } } //全选按钮状态 $scope.checks=function () { var n=0; for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { n++; } else { n--; } } if(n==$scope.data.length) { $scope.check=true; } else { $scope.check=false; } } //日期之间 $scope.kai="开始月份"; $scope.jie="结束月份"; $scope.pan=function () { if( $scope.kai!="开始月份" && $scope.jie!="结束月份") { //装换为int类型判断 var kai=parseInt( $scope.kai); var jie=parseInt($scope.jie); for(var i=0;i<$scope.data.length;i++) { //拆分时间 var arr=$scope.data[i].time.split("-"); var da=parseInt(arr[0]); console.log(da); //判断 if(da>=kai && da<=jie) { return true; } else { return false; } } } else { return true; } } //添加新客户 $scope.newsname=""; $scope.newname=""; $scope.newphone=""; $scope.b=false; $scope.redcheck=false; $scope.newcity="请选择"; $scope.tj=function () { if($scope.newsname==""|| $scope.newsname.length<6 || $scope.newsname.length>20 || $scope.newname.length<4 || $scope.newname>16 || $scope.newcity=="请选择") { $scope.b=true; $scope.redcheck=true; } else { $scope.data.push({done:false,sname: $scope.newsname,name:$scope.newname,phone:$scope.newphone,price:1999,city:$scope.newcity,time:"",zhuai:"发货"}) } } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <input type="text" placeholder="用户名搜索" ng-model="uname"> <input type="text" placeholder="手机号搜索" ng-model="uphone"> <select ng-model="ucity"> <option>选择城市</option> <option>北京</option> <option>上海</option> <option>天津</option> <option>重庆</option> </select> <select ng-model="uzhuai"> <option>状态</option> <option>待发货</option> <option>发货</option> <option>已收货</option> <option>已发货</option> </select> <select ng-model="kai"> <option>开始月份</option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select>- <select ng-model="jie" ng-change="pan()"> <option>结束月份</option> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> </select><br/><br/><br/> <button ng-click="newD()">新增订单</button><buttonng-click="delete()">批量删除</button> <table border="1px solide #000"> <thead> <tr> <th><inputtype="checkbox"ng-model="check"ng-click="checkAll()"></th> <th>下标<span><buttonng-click="pai('$index')">排序</button></span></th> <th>商品名称</th> <th>用户名</th> <th>手机号</th> <th>价格<span><buttonng-click="pai('price')">排序</button></span></th> <th>城市</th> <th>下单时间<span><buttonng-click="pai('time')">排序</button></span></th> <th>状态</th> </tr> </thead> <tbody> <tr ng-repeat="item in data|filter:{'name':uname}|filter:{'phone':uphone}|filter:citys|filter:zhuais|orderBy:sortname|filter:pan"> <td><inputtype="checkbox"ng-model="item.done"ng-click="checks()"></td> <td>{{$index}}</td> <td>{{item.sname}}</td> <td>{{item.name}}</td> <td>{{item.phone}}</td> <td>{{item.price|currency:"￥"}}</td> <td>{{item.city}}</td> <td>{{item.time}}</td> <td ng-click="zhuang($index)">{{item.zhuai}}</td> </tr> </tbody> </table> <div ng-show="show"> <h2>新增订单</h2> 商品名:<input type="text" placeholder="6-20个字符" ng-class="{red:redcheck}" ng-model="newsname"><br/><br/> 用户名:<input type="text" placeholder="4-16个字符" ng-class="{red:redcheck}" ng-model="newname"><br/><br/> 手机号:<input type="text" ng-class="{red:redcheck}" ng-model="newphone"><br/><br/> 城市: <select ng-model="newcity"> <option>请选择</option> <option>北京</option> <option>上海</option> <option>天津</option> <option>重庆</option> </option> </select><br/><br/> <div class="b" ng-show="b"> <p>商品名不能为空!</p> <p>商品名必须是6-12个字符!</p> <p>用户名不能为空!</p> <p>用户名必须是4-16个字符!</p> <p>手机号不能为空!</p> </div> <button ng-click="tj()">提交</button> </div> </body> </html>

阅读全文

0 0