angularjs的发货,已发货切换

来源：互联网发布：qq空间免费刷人气软件编辑：程序博客网时间：2024/06/10 01:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--样式-->    <style>        td,th{            width: 120px;            height: 60px;            border: 1px solid #69717d;        }        table{            border-collapse: collapse;            margin-top: 6px;            margin-bottom: 6px;        }        .but{            margin-top: 6px;            margin-bottom: 6px;            background: #0a9dc7;        }        .red{            border: 1px solid red;        }    </style>    <!--导入angular包-->    <script src="angular-1.5.5/angular.min.js"></script>    <script>        /*声明模块*/        var myapp=angular.module("myapp",[]);        /*为模块添加控制器*/        myapp.controller("myCtrl",function ($scope) {            /*创建数组*/            $scope.items=[                {                  done:false,                   "id":1,                    "sname":"小米",                    "yname":"张三",                    "phone":111111,                    "price":1000,                    "city":"北京",                    "times":3,                    "ztai":"发货"                },                {                    done:false,                    "id":2,                    "sname":"苹果",                    "yname":"李四",                    "phone":222222,                    "price":2000,                    "city":"上海",                    "times":5,                    "ztai":"发货"                },                {                    done:false,                    "id":3,                    "sname":"小米",                    "yname":"王五",                    "phone":333333,                    "price":3000,                    "city":"重庆",                    "times":7,                    "ztai":"已发货"                },                {                    done:false,                    "id":4,                    "sname":"三星",                    "yname":"赵六",                    "phone":444444,                    "price":4000,                    "city":"天津",                    "times":9,                    "ztai":"已发货"                }            ]            /*城市选择 查询*/            $scope.citySSS="城市选择";            /*注意传值*/            $scope.citySize=function (item) {                //console.log(item);                if($scope.citySSS!="城市选择"){                    if(item.city==$scope.citySSS){                        return true;                    }else{                        return false;                    }                }else{                    return true;                }            }            /*城市 状态选择 查询*/            $scope.ztaiSSS="状态选择";            /*注意传值*/            $scope.ztaiSize=function (item) {                //console.log(item);                if($scope.ztaiSSS!="状态选择"){                    if(item.ztai==$scope.ztaiSSS){                        return true;                    }else{                        return false;                    }                }else{                    return true;                }            }            /*开始月份 查询*/            $scope.timesSize="开始月份";            /*注意传值*/            $scope.timesFilter=function(item){                if($scope.timesSize!="开始月份"){                    var timesSize=$scope.timesSize;                    var timesArr=timesSize.split("-");                    var min=timesArr[0];                    var max=timesArr[1];                    var times=item.times;                    if(times>max||times<min){                        return false                    }else{                        return true;                    }                }else{                    return true;                }            };            /*显示隐藏*/            $scope.xian=false;            /*显示订单方法*/            $scope.showall=function () {                /*显示*/                $scope.xian=true;            }            /*添加新数据方法，隐藏订单*/            $scope.additem=function () {                /*循环，判断*/                for(var i=0;i<$scope.items.length;i++){                    if($scope.sname==$scope.items[i].sname&&$scope.yname==$scope.items[i].yname&&$scope.phone==$scope.items[i].phone&&$scope.city==$scope.items[i].city){                        alert("订单填写重复");                        return;                    }                    if($scope.sname==null||$scope.yname==null||$scope.phone.length<8||$scope.phone.length>12||$scope.city==null){                       /* alert("请填写商品名，请填写用户名，手机号为8-12位，请填写城市");*/                       alert("请填写完整")                        return;                    }                }/*添加*/                $scope.items.push({'id':"0",'sname':$scope.sname,'yname':$scope.yname,'phone':$scope.phone,'price':"999",'city':$scope.city,'times':"6",'ztai':"发货"});                /*隐藏*/                $scope.xian=false;            }            /*全选*/            $scope.checkall=function () {                if ($scope.check1 == true) {                    for (var i = 0; i < $scope.items.length; i++) {                        $scope.items[i].done = true;                    }                }                else {                    for (var i = 0; i < $scope.items.length; i++) {                        $scope.items[i].done = false;                    }                }            }            /*反选*/            var n=0;            $scope.fx=function (index) {                if($scope.items[index].done==true){                    n++;                }else{                    n--;                }                if(n==$scope.items.length){                    $scope.check1=true;                }else {                    $scope.check1=false;                }            }            /*默认正序排序，*/            $scope.revers=false;            /*默认按name排序*/            $scope.sortColumn="id";            /*排序*/            $scope.sort=function (Column) {                /*如果按变量Column排序*/                if($scope.sortColumn==Column){                    /*点击age排序，默认正序排序，再次点击age,倒叙排序*/                    $scope.revers=!$scope.revers;                }                /*变量赋值给常量*/                $scope.sortColumn=Column;            };            /*点击切换*/            $scope.yfh="已发货"            $scope.fun=function (index) {                if($scope.items[index].ztai=="发货"){                    $scope.items[index].ztai=$scope.yfh;                }            }        })    </script></head><!--ng-app="myapp" ng-controller="myCtrl"--><body ng-app="myapp" ng-controller="myCtrl"><!--模糊查询--><input type="text" placeholder="用户名搜索" ng-model="cz"><input type="text" placeholder="手机号搜索" ng-model="czs"><!--绑定ng-model="citySSS，点击事件方法在遍历里过滤--><select  ng-model="citySSS">    <option>城市选择</option>    <option>北京</option>    <option>上海</option>    <option>重庆</option>    <option>天津</option></select><!--绑定ng-model="ztaiSSS，点击事件方法在遍历里过滤--><select ng-model="ztaiSSS">    <option>状态选择</option>    <option>发货</option>    <option>已发货</option></select><!--绑定ng-model="timesSize，点击事件方法在遍历里过滤--><select ng-model="timesSize">    <option>开始月份</option>    <option>1-3</option>    <option>4-6</option>    <option>7-9</option>    <option>10-12</option></select><select>    <option>结束月份</option>    <option>1-3</option>    <option>4-6</option>    <option>7-9</option>    <option>10-12</option></select><br><!--点击 新增订单 按钮,显示订单--><button class="but" ng-click="showall()">新增订单</button><button class="but">批量发货</button><br><!--订单div,ng-show="xian"--><div ng-show="xian"><h3>新增订单</h3>    商品名：<input type="text" placeholder="请填写商品" ng-model="sname" ng-class="{red:check}"><br>    用户名：<input type="text" placeholder="请填写用户名" ng-model="yname" ng-class="{red:check}"><br>    手机号：<input type="text" placeholder="手机号为8-12位" ng-model="phone" ng-class="{red:check}"><br>    <!--ng-model="city"-->    城市选择：<select ng-model="city">        <option>北京</option>        <option>上海</option>        <option>重庆</option>        <option>天津</option>    </select><br>    <!--点击 提交按钮,隐藏订单，-->    <button class="but" ng-click="additem()">提交</button></div><table>    <tr>        <!--ng-click="checkall()" ng-model="check1"-->        <th><input type="checkbox" ng-click="checkall()" ng-model="check1"></th>        <!--点击事件 排序方法 按照参数排序-->        <th>ID<button ng-click="sort('id')">排序</button></th>        <th>商品名</th>        <th>用户名</th>        <th>手机号</th>        <th>价格<button ng-click="sort('price')">排序</button></th>        <th>城市</th>        <th>下单时间<button ng-click="sort('times')">排序</button></th>        <th>状态</th>    </tr>    <!--遍历，过滤-->    <tr ng-repeat="item in items|filter:{yname:cz}|filter:{phone:czs}|filter:citySize|filter:ztaiSize|filter:timesFilter|orderBy:sortColumn:revers">        <!--ng-model="item.done" ng-click="fx($index)"-->        <td><input type="checkbox" ng-model="item.done" ng-click="fx($index)"></td>        <td>{{item.id}}</td>        <td>{{item.sname}}</td>        <td>{{item.yname}}</td>        <td>{{item.phone}}</td>        <td>{{item.price}}</td>        <td>{{item.city}}</td>        <td>{{item.times}}</td>        <!--切换方法-->        <td ng-click="fun($index)">{{item.ztai}}</td>    </tr></table></body></html>
阅读全文
0 0