AngualrJS实现购物车订单功能/添加/排序/过滤

于 2017-10-26 10:10:59 发布
阅读量506 收藏
点赞数
分类专栏： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TianzhuZ/article/details/78349999
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        button{
            background-color: #19d656;
        }
        table tr:nth-child(odd){background:#CCCCCC;}
        table tr:nth-child(even){background:#FFFFFF;}
    </style>
    <script src="AngularJS/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            $scope.arr = [{
                acheck:false,
                phoneName:"iphone9",
                name:"张三",
                phoneNum:15666916123,
                price:4999,
                city:"北京",
                time:"08-01 10:00",
                state:"发货"
            },{
                acheck:false,
                phoneName:"小米4",
                name:"李四",
                phoneNum:15615116123,
                price:3999,
                city:"上海",
                time:"08-02 10:00",
                state:"发货"
            },{
                acheck:false,
                phoneName:"iphone8",
                name:"张三",
                phoneNum:15662226123,
                price:9999,
                city:"深圳",
                time:"08-03 10:00",
                state:"发货"
            },{
                acheck:false,
                phoneName:"iphone4",
                name:"张三",
                phoneNum:15666916123,
                price:4999,
                city:"北京",
                time:"08-01 10:00",
                state:"发货"
            }];
            //添加订单的按钮
            $scope.addbtn = function () {
                $scope.myVal = !$scope.myVal;
            }
            $scope.addData = function (goodsName,userName,num,city) {
                var flag = true;
                //商品名判断
                if(goodsName == "" || goodsName == null){
                    $scope.A1 = true;
                    flag=false;
                }else{
                    $scope.A1 = false;
                    if(goodsName.length <6 || goodsName.length >20){
                        $scope.A2 = true;
                        flag=false;
                    }else{
                        $scope.A2 = false;
                    }
                }
                //用户名判断
                if(userName == "" || userName == null){
                    $scope.A3 = true;
                    flag=false;
                }else{
                    $scope.A3 = false;
                    if(userName.length <4 || userName.length >16){
                        $scope.A4 = true;
                        flag=false;
                    }else{
                        $scope.A4 = false;
                    }
                }
                //手机号判断
                if(num == "" || num == null){
                    $scope.A5 = true;
                    flag=false;
                }else{
                    $scope.A5 = false;
                    if(num.length != 11){
                        $scope.A6 = true;
                        flag=false;
                    }else{
                        $scope.A6 = false;
                    }
                }
                //手机号判断
                if(city == "" || city == null){
                    $scope.A7 = true;
                    flag=false;
                }else{
                    $scope.A7 = false;
                }
                if(flag){
                    $scope.arr.push({
                        acheck:false,
                        //goodsName,userName,num,city
                        phoneName:goodsName,
                        name:userName,
                        phoneNum:num,
                        price:3999,
                        city:city,
                        time:"12-02 10:00",
                        state:"待发货"
                    });
                }
            }
            //全选
            $scope.all = function () {
                if($scope.allCheck){
                    for(i in $scope.arr){
                        $scope.arr[i].acheck = true;
                    }
                }else{
                    for(i in $scope.arr){
                        $scope.arr[i].acheck = false;
                    }
                }
            }
            $scope.checkSelectAll = function(){
                var flag = false;
                for(i in $scope.arr){
                    if($scope.arr[i].acheck){

                    }else{
                        flag = true;
                    }
                }
                //至少有一个没有被选中
                if(flag){
                    $scope.allCheck = false;
                }else{
                    $scope.allCheck = true;
                }
            }
            //改变状态
            $scope.fahuo = function (index) {
                $scope.arr[index].state = '已发货';
            }
            $scope.daifahuo = function (index) {
                $scope.arr[index].state = '发货';
            }

            //城市查询
            $scope.city1="选择城市";
            $scope.citys=function (goods) {
                //alert("1");
                if( $scope.city1!="选择城市")
                {
                    if( $scope.city1==goods.city)
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                }
                else
                {
                    return true;
                }
            }
            //状态查询
            $scope.state1="选择状态";
            $scope.states=function (goods) {
                //alert("1");
                if( $scope.state1!="选择状态")
                {
                    if( $scope.state1==goods.state)
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                }
                else
                {
                    return true;
                }
            }
            //判断日期
            $scope.startTime = "开始月份";
            $scope.endTime = "结束月份";
            //过滤时间
            $scope.filterTime = function(index){
                //获得开始和结束月份

                //获取当前订单的时间月份
                var time = $scope.arr[index].time;
                var month = parseInt(time.split("-")[0]);

                if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
                    return true;
                }else{
                    var start = parseInt($scope.startTime);
                    var end = parseInt($scope.endTime);

                    if(month >=start && month<=end ){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
            //排序
            $scope.aflag = "-";
            $scope.aname = "name";
            $scope.order = function (clomnName) {
                alert(clomnName);
                $scope.aname = clomnName;
                //判断
                if($scope.aflag == "-"){
                    $scope.aflag = "";
                }else{
                    $scope.aflag = "-"
                }
            };
            $scope.pifa = function () {
                for(i in $scope.arr){
                    if($scope.arr[i].acheck){
                        $scope.arr[i].state = '已发货';
                    }else{

                    }
                }
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table cellpadding="5px" cellspacing="0">
    <tr>
        <td><input type="text" placeholder="用户名搜索" ng-model="selectName"></td>
        <td><input type="text" placeholder="手机号搜索" ng-model="selectPhoneNum"></td>
        <td>
            <select ng-model="city1">
            <option>选择城市</option>
            <option>北京</option>
            <option>上海</option>
            <option>天津</option>
            <option>深圳</option>
        </select>
        </td>
        <td>
            <select ng-model="state1">
            <option>选择状态</option>
            <option>发货</option>
            <option>待发货</option>
            <option>已发货</option>
            <option>已收货</option>
        </select>
        </td>
        <td>
            <select ng-model="startTime">
                <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>
        </td>
        <td>-</td>
        <td>
            <select ng-model="endTime">
                <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>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button ng-click="addbtn()">新增订单</button>
            <button ng-click="pifa()">批量发货</button>
        </td>
    </tr>
</table>
<table border="1 solid blue" width="1000px" cellspacing="0" cellpadding="3">
    <tr>
        <th><input type="checkbox" ng-model="allCheck" ng-click="all()"></th>
        <th width="70px">ID<button ng-click="order('id')">排序</button></th>
        <th>商品名</th>
        <th>用户名</th>
        <th>手机号</th>
        <th width="80px">价格<button ng-click="order('price')">排序</button></th>
        <th>城市</th>
        <th width="130px">下单时间<button ng-click="order('time')">排序</button></th>
        <th>状态</th>
    </tr>
    <tr ng-repeat="goods in arr | filter:{'name':selectName} | filter:{'phoneNum':selectPhoneNum} | filter:citys | filter:states | orderBy:(aflag+aname)" ng-if="filterTime($index)">
        <td><center><input type="checkbox" ng-model="goods.acheck" ng-click="checkSelectAll()"></center></td>
        <td><center>{{$index+1}}</center></td>
        <td><center>{{goods.phoneName}}</center></td>
        <td><center>{{goods.name}}</center></td>
        <td><center>{{goods.phoneNum}}</center></td>
        <td><center>{{goods.price | currency:"￥"}}</center></td>
        <td><center>{{goods.city}}</center></td>
        <td><center>{{goods.time}}</center></td>
        <td><center>
            <span ng-if="goods.state == '发货'" ng-click="fahuo($index)">{{goods.state}}</span>
            <span ng-if="goods.state == '待发货'" ng-click="daifahuo($index)">{{goods.state}}</span>
            <span ng-if="goods.state == '已发货'" ng-click="yifahuo()">{{goods.state}}</span>
        </center></td>
    </tr>
</table>
<div ng-if="myVal">
    <h3>新增订单</h3>
    商品名:<input type="text" placeholder="6-20个字符" ng-model="goodsName"><br>
    用户名:<input type="text" placeholder="4-16个字符" ng-model="userName"><br>
    手机号:<input type="text" ng-model="num"><br>
    城市:<select ng-model="city">
            <option>选择城市</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="天津">天津</option>
            <option value="深圳">深圳</option>
        </select><br>
        <div>
            <ul>
                <li ng-if="A1">商品名不可为空</li>
                <li ng-if="A2">商品名必须是6-20个字符</li>
                <li ng-if="A3">用户名不可为空</li>
                <li ng-if="A4">用户名必须是4-16个字符</li>
                <li ng-if="A5">手机号不可为空</li>
                <li ng-if="A6">手机号格式不正确</li>
                <li ng-if="A7">请选择城市</li>
            </ul>
        </div>
    <button ng-click="addData(goodsName,userName,num,city)">提交</button>
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值