angularjs的发货,已发货切换_angular js 已发货-优快云博客

本文介绍了一个使用AngularJS实现的订单管理系统案例，该系统包括订单的增删查改、筛选、排序等功能，并通过实例代码展示了如何将AngularJS应用于实际业务场景。
<!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>