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

最新推荐文章于 2022-04-19 16:53:23 发布
最新推荐文章于 2022-04-19 16:53:23 发布
阅读量469 收藏
点赞数
分类专栏： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>
Android丶ztz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS购物车的实现与保姆级详细讲解(一)
weixin_47724586的博客
08-12 516
JS购物车的实现与保姆级详细讲解 1.话不多说，我们先放截图，有兴趣的同学可以接着往下看，没兴趣的同学也不会浪费掉自己的宝贵时间，相关代码地址放在文章末尾。 2.可以看到，此购物车有如下功能，商品的累加累减，合计数量，以及总花费金额和最高商品单价，首先案例结构如下： 3.代码量相比其他项目或者案例，并不算太多，相对来说也好理解，整个购物车分为上下两个主要部分，即最上层的ul和最下层的class叫做info的div标签。 ul里细分为5个小li： 4.这五个小li对应着购物车的每一件商品，其中购物车的
angluar 表单提交时候报错
T20170218的博客
08-31 157
Error: If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions 报这个错的时候就在 input 表单上填上name okok 不...
Vue.js之排序和添加购物车操作
a3060858469的博客
06-02 1827
项目之按销量价格排序操作 &lt;el-tabs v-model="activeName" @tab-click="priceFun" &gt; &lt;el-tab-pane label="按销量排序" name="hot"&gt;&lt;/el-tab-pane&gt; &lt;el-tab-pane label="按价格由高到低&quo
数据列表+商城购物车纯JS实现
01-04
1.用列表展现数据 2.可增删改查 3.纯JS、JQuery实现 4.购物车技术同理
php实现购物车功能（以大苹果购物网为例）
10-20
本文主要介绍了php实现购物车功能（以大苹果购物网为例）的实现方法，具有很好的参考价值。下面跟着小编一起来看下吧
AngularJS 购物车全选/取消全选功能的实现方法
01-19
刚学习angularJS，于是练习写了一个类似于购物车的全选/取消全选的功能，主要实现的功能有： 1、勾选全选checkbox，列表数据全部被勾选，取消同理，用ng-model实现双向绑定； 2、选中列表中的所有checkbox，全选也会...
PHP实现添加购物车功能
10-20
an = true; break; } } if($chuxian) { //购物车中有该商品，增加数量 for($i=0;$i($arr);...总之，这个示例提供了一个基本的PHP购物车功能实现思路，但在实际项目中，需要根据具体需求进行扩展和完善。
Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解
10-15
本篇文章将详细讲解如何使用Vue.js与Node.js来实现这些功能，以及添加购物车的功能。 1. **分页** 分页是提高用户体验的关键，避免一次性加载大量数据导致页面加载慢。Vue.js可以通过向后端发送请求获取指定页码的...
jQuery实现移动端手机商城购物车功能
10-21
在移动端手机商城开发中，购物车功能的实现是十分关键的环节。本文将详细介绍如何使用jQuery技术来实现一个移动端购物车功能，包括商品数量的增加与减少、计算商品总价等。这些知识点对于移动电商应用开发人员来说尤...
angularjs select 赋值 ng-options配置方式
热门推荐
大大的微笑的专栏
12-24 2万+
angularjs select 赋值 ng-options配置方式数组方式数据是数组$scope.years = [2014, 2015, 2016];页面元素 <select ng-model="item" ng-options="item as y for y in years"> </select>设置默认值 如果需要设置默认的选项，可以先设置一个参数：$scope.item = 2
JS案例：购物车操作（简单实现）
12-02 1783
Html： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
购物车(排序,删除,查询)
北屵
09-17 892
charset="utf-8" />     src="js/angular.js">     var app=angular.module("myapp",[])   app.controller("myctrl",function($scope){   $scope.arr=[   {"bianhao"
过滤订单
weixin_43090018的博客
01-30 334
在我的页面中过滤掉比如付款完成或者退款成功的订单个数 用到的是js中的filter这个方法，它用于对数组进行过滤 //将退款成功的订单的长度过滤掉，只显示正在退款和退款失败的 this.refundArr = this.arr5.filter(item => { return item.is_refund != 2 && item.is_refund != 1 }) ...
js_06 表单案例
weixin_66616840的博客
04-10 536
文章目录1.表单增加功能2.表单删除功能3.表单修改功能4.表单确定功能 1.表单增加功能 获取要操作的表格。 开始增加行：增加的行的位置在表格的倒数第二行，下标：总行数-1。空行 获取表格行目前的最大下标 给新增加的行对象 newRow添加 id属性 往空行里面增加4个列 // 增加行 var myTable = document.getElementById("order"); function addRow(){ var row
AngularJS——select使用及默认值详解
Mickeymouse
09-29 1万+
在angularjs中，select设置默认值特别不方便，如果动态的改变用原生的就更不是不好解决了，那就需要用angularjs为select提供的属性和方法了。 select中的ngOption可以采用和ngRepeat指令类似的循环结构，其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。 JS代码如下： funct
从零开始学前端：购物车和鲜花价格排序 --- 数组应用
每一次跌倒都是为了华丽的站起来。
04-19 331
从零开始学前端：购物车和鲜花价格排序 --- 数组应用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值