AngularJs实现订单列表的增加删除查询排序

本文链接：https://blog.youkuaiyun.com/hongfuqiang/article/details/78348714
在学习AngularJs我们会遇到订单列表
源代码如下:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>月考模拟</title>
    <style type="text/css">
        #all{
            width: 800px;
            height: 700px;
            margin: auto;
        }
        .filter {
            width: 800px;
            height: 60px;
            margin: 0 auto;
        }

        .filter input {
            width: 152px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }

        .filter select {
            width: 86px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }
        button {
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }
        .add{
            width: 80px;
            height: 30px;
            margin-top: 5px;
            background: green;
            color: snow;
        }
        .show{
            width: 80px;
            height: 30px;
            margin-top: 5px;
            background: green;
            color: snow;
        }
        table{
            width: 800px;
            text-align: center;
        }
        table th{
            background: #aaaaaa;
        }
        #add_show{
            margin-top: 10px;
            width: 798px;
            height: 600px;
            border: 1px solid black;
        }
        #add_show b{
            font-size: 20px;
            margin: 10px;
        }
        #add_from{
            width: 600px;
            margin: auto;
        }
        #add_from span{
            margin-top: 15px;
            font-size: 20px;
            margin-right: 10px;
        }
        #add_from input{
            font-size: 20px;
            margin-top: 15px;
            width: 500px;
            height: 30px;
        }
        #add_from select{
            font-size: 20px;
            width: 130px;
            height: 30px;
            margin-top: 15px;
        }
        #add_erro{
            width: 500px;
            height: 250px;
            background: lightpink;
            margin-left: 68px;
            margin-top: 15px;
        }
        #add_erro ul{
            width: 300px;
            height: 250px;
            padding-top: 10px;
            margin-left: 20px;
            color: palevioletred;
        }
        #add_erro li{
            margin-top: 10px;
        }
        #button{
            background: green;
            color: aliceblue;
            width: 60px;
            height: 40px;
            font-size: 16px;
            margin-left: 168px;
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            odd= {"background":"#ddd"};//奇数样式
            even={"background":"#fff"};//偶数样式
            odd_even("#table_test",odd,even);
        });
        function odd_even(id,odd,even){
            $("table").find("tr").each(function(index,element){
                if(index%2==1)
                    $(this).css(odd);
                else
                    $(this).css(even);
            });
        }
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.users = [
                {
                    id:1,
                    show_name:"iPhone4",
                    name:"张三",
                    number:"1213213123",
                    price:4999,
                    city:"北京",
                    time:"08-01 15:32",
                    status:"待发货"
                },
                {
                    id:2,
                    show_name:"小米6",
                    name:"李四",
                    number:"346363466",
                    price:2999,
                    city:"北京",
                    time:"05-02 14:22",
                    status:"待发货"
                },
                {
                    id:3,
                    show_name:"华为P9",
                    name:"王五",
                    number:"32532535",
                    price:3999,
                    city:"上海",
                    time:"08-03 09:18",
                    status:"已发货"
                },
                {
                    id:4,
                    show_name:"OPPO R11",
                    name:"赵六",
                    number:"976969464",
                    price:4999,
                    city:"天津",
                    time:"10-04 13:32",
                    status:"已收货"
                },
                {
                    id:5,
                    show_name:"VIVO",
                    name:"周七",
                    number:"213141125",
                    price:2999,
                    city:"重庆",
                    time:"06-05 21:34",
                    status:"已发货"
                },
            ]
            //按月查找
            $scope.filterByMonth = function (user) {
                if ($scope.filter_begin_month == undefined || $scope.filter_begin_month == "") {
                    return true;
                }

                if ($scope.filter_end_month == undefined || $scope.filter_end_month == "") {
                    return true;
                }

                var beginMonth = parseInt($scope.filter_begin_month);
                var endMonth = parseInt($scope.filter_end_month);
                if (beginMonth > endMonth) {
                    return true;
                }


                var month = user.time.substring(0, user.time.indexOf("-"));
                month = parseInt(month);
                return (month >= beginMonth && month <= endMonthd);
            };
            $scope.showAddOrderForm = function () {
                $scope.isShowAddOrderForm = true;
            };
            //全选按钮
            $scope.gou=function () {
                for(var i=0;i<$scope.users.length;i++) {
                    if($scope.checkAll==true) {
                        $scope.users[i].state=true;
                    } else {
                        $scope.users[i].state=false;
                    }
                }
            }
            //价格排序
            $scope.changePriceOrderType = function () {
                if ($scope.price_order_type == "price") {
                    $scope.price_order_type = "-price";
                } else {
                    $scope.price_order_type = "price";
                }
            };
            //时间排序
            $scope.changeTimeOrderType = function () {
                if ($scope.time_order_type == "time") {
                    $scope.time_order_type = "-time";
                } else {
                    $scope.time_order_type = "time";
                }
            };
            //ID排序
            $scope.order = function () {
                if ($scope.search_id == 1) {
                    $scope.users.sort(function (json1, json2) {
                        return (json1.id < json2.id) ? 1 : -1;
                    });
                } else if ($scope.search_id == 2) {
                    $scope.users.sort(function (json1, json2) {
                        return (json1.id > json2.id) ? 1 : -1;
                    });
                }
            }
            // 将待发货，改成已发货
            $scope.deliver = function (id) {
                for (var i in $scope.users) {
                    if ($scope.users[i].id == id) {
                        $scope.users[i].status = "已发货";
                    }
                }
            };
            //批量发货
            $scope.sendShow=function(){
                var userNames=[];
                for(index in $scope.users){
                    if($scope.users[index].state == true){
                        userNames.push($scope.users[index].id);
                    }
                }

                if(userNames.length>0){
                    if(confirm("是否对选中项发货？")){
                        for(i in userNames){
                            var id=userNames[i];
                            for (var i in $scope.users) {
                                if ($scope.users[i].id == id) {
                                    $scope.users[i].status = "已发货";
                                }
                            }
                        }
                    }
                }else{
                    alert("请选择发货的项")
                }
            }
            //批量删除
            $scope.deleteShow=function(){
                var userNames=[];
                for(index in $scope.users){
                    if($scope.users[index].state == true){
                        userNames.push($scope.users[index].name);
                    }
                }

                if(userNames.length>0){
                    if(confirm("是否删除选中项？")){
                        for(i in userNames){
                            var name=userNames[i];
                            for(i2 in $scope.users){
                                if($scope.users[i2].name==name){
                                    $scope.users.splice(i2,1);
                                }
                            }
                        }
                    }
                }else{
                    alert("请选择删除的项")
                }
            }
            //创建date对象
            var date = new Date();
            //获取年
            var y = date.getFullYear();
            //月  默认是0-11  [0,12)
            var m = date.getMonth()+1;
            //日
            var d  = date.getDay();//获取一个星期里面的第几天
            var dd = date.getDate();//或某个月的某一天
            //时分秒
            var h = date.getHours();
            var mm = date.getMinutes();
            var s = date.getSeconds();
            //拼接
            var t = m+"-"+dd+" "+h+":"+mm;
            $scope.erro_show = false;
            $scope.l1 = false;
            $scope.l2 = false;
            $scope.l3 = false;
            $scope.l4 = false;
            $scope.l5 = false;
            $scope.l6 = false;
            $scope.l7 = false;
            $scope.sub = function(){
                var show_name = $scope.add_show_name;
                var name = $scope.add_name;
                var number = $scope.add_number;
                var city = $scope.add_city;
                if(show_name!=null){
                    if(show_name.length>=6&&show_name.length<=20){
                        $scope.show_name_style ={
                            "border":"1px solid #ccc"
                        }
                        if(name!=null){
                            if(name.length>=4&&name.length<=16){
                                $scope.name_style ={
                                    "border":"1px solid #ccc"
                                }
                                if(number!=null){
                                    if(number.length==11){
                                        $scope.number_style ={
                                            "border":"1px solid #ccc"
                                        }
                                        if(city!=undefined&&city!=""){
                                            $scope.city_style ={
                                                "border":"1px solid #ccc"
                                            }
                                            var newUser = {
                                                id:$scope.users.length + 1,
                                                show_name:$scope.add_show_name,
                                                name:$scope.add_name,
                                                number:$scope.add_number,
                                                price:2999,
                                                city:$scope.add_city,
                                                time:t,
                                                status:"待发货",
                                            }
                                            //添加新用户.
                                            $scope.users.push(newUser);
                                            $scope.isShowAddOrderForm = false;
                                        }else{
                                            $scope.city_style ={
                                                "border":"1px solid red"
                                            }
                                            $scope.erro_show = true;
                                            $scope.l7 = true;
                                        }
                                    }else{
                                        $scope.number_style ={
                                            "border":"1px solid red"
                                        }
                                        $scope.erro_show = true;
                                        $scope.l6 = true;
                                    }
                                }else{
                                    $scope.number_style ={
                                        "border":"1px solid red"
                                    }
                                    $scope.erro_show = true;
                                    $scope.l5 = true;
                                }
                            }else{
                                $scope.name_style ={
                                    "border":"1px solid red"
                                }
                                $scope.erro_show = true;
                                $scope.l4 = true;
                            }
                        }else{
                            $scope.name_style ={
                                "border":"1px solid red"
                            }
                            $scope.erro_show = true;
                            $scope.l3 = true;
                        }
                    }else{
                        $scope.show_name_style ={
                            "border":"1px solid red"
                        }
                        $scope.erro_show = true;
                        $scope.l2 = true;
                    }
                }else{
                    $scope.show_name_style ={
                        "border":"1px solid red"
                    }
                    $scope.erro_show = true;
                    $scope.l1 = true;
                }


            }
        });


    </script>
</head>
<body ng-controller="myCtrl">
<div id="all">
    <div class="filter">
        <input type="text" placeholder="用户名搜索" ng-model="search_name">
        <input type="text" placeholder="手机号搜索" ng-model="search_num">
        <select ng-model="search_city">
            <option value="">选择城市</option>
            <option>北京</option>
            <option>上海</option>
            <option>重庆</option>
            <option>天津</option>
            <option>深圳</option>
        </select>
        <select ng-model="search_status">
            <option value="">选择状态</option>
            <option value="待发货">待发货</option>
            <option value="已发货">已发货</option>
            <option value="已收货">已收货</option>
        </select>
        <select ng-model="filter_begin_month">
            <option value="">开始月份</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>-
        <select ng-model="filter_end_month">
            <option value="">结束月份</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select ng-model="search_id" ng-change="order()">
            <option value="">排序</option>
            <option value="1">ID正序</option>
            <option value="2">ID倒序</option>
        </select>
        <br>
        <input type="button" value="新增订单" class="add" ng-click="showAddOrderForm();" >
        <input type="button" value="批量发货" class="show" ng-click="sendShow();">
        <input type="button" value="批量删除" class= "show" ng-click="deleteShow();">
    </div>
    <table border="1" cellspacing="0" cellpadding="10">
        <thead>
        <tr>
            <th><input type="checkbox" ng-click="gou()" ng-model="checkAll"></th>
            <th>ID</th>
            <th>商品名</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>价格<button ng-click="changePriceOrderType()">排序</button></th>
            <th>城市</th>
            <th>下单时间<button ng-click="changeTimeOrderType()">排序</button></th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users | filter:{'name':search_name}|filter:{'number':search_num}|filter:{'city':search_city}|filter:{'status':search_status}| filter: filterByMonth| orderBy: id|orderBy: price_order_type|orderBy: time_order_type">
            <td><input ng-model="user.state" type="checkbox"></td>
            <td>{{user.id}}</td>
            <td>{{user.show_name}}</td>
            <td>{{user.name}}</td>
            <td>{{user.number}}</td>
            <td>{{user.price| currency: "￥"}}</td>
            <td>{{user.city}}</td>
            <td>{{user.time}}</td>
            <td>
                <span ng-show="user.status=='待发货'" ng-click="deliver(user.id)">
                    <a href="javascript: void(0);">发货</a>
                </span>
                <span ng-show="user.status=='已发货'">已发货</span>
                <span ng-show="user.status=='已收货'">已收货</span>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="add_show" ng-show="isShowAddOrderForm">
        <b>新增订单</b>
        <div id="add_from" >
            <span>商品名</span><input type="text" placeholder="6-20个字符" ng-model="add_show_name" ng-style="show_name_style"><br>
            <span>用户名</span><input type="text" placeholder="4-16个字符" ng-model="add_name" ng-style="name_style"><br>
            <span>手机号</span><input type="text" ng-model="add_number" ng-style="number_style"><br>
            <span style="margin-left: 16px;">城市</span>
            <select ng-model="add_city" ng-style="city_style">
                <option value="">选择城市</option>
                <option>北京</option>
                <option>上海</option>
                <option>天津</option>
                <option>重庆</option>
                <option>深圳</option>
            </select>
            <div id="add_erro" ng-show="erro_show">
                <ul>
                    <li ng-show="l1">商品名不能为空</li>
                    <li ng-show="l2">商品名必须是6-20个字符</li>
                    <li ng-show="l3">用户名不能为空</li>
                    <li ng-show="l4">用户名必须是4-16个字符</li>
                    <li ng-show="l5">手机号不能为空</li>
                    <li ng-show="l6">手机号格式不正确</li>
                    <li ng-show="l7">请选择城市</li>
                </ul>
            </div>
        </div>
        <input type="button" value="提交" ng-click="sub()" id="button">
    </div>

</div>
</body>
</html>