angularjs增删查,排序,发货

最新推荐文章于 2018-01-17 18:47:12 发布
最新推荐文章于 2018-01-17 18:47:12 发布
阅读量215 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l59_1/article/details/78857458
版权

angularjs增删查,排序,点击未发货按钮改变按钮颜色,并且变为已发货,批量删除已发货数据,按商品内容,手机号查询数据,按发货状态查询已发货数据和未发货数据

<title></title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .btn {
                background: blue;
                border: 0px;
                border-radius: 3px;
            }

            .true {
                background: greenyellow;
                border: 0px;
                border-radius: 3px;
            }

            .false {
                background: yellow;
                border: 0px;
                border-radius: 3px;
            }

        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <!--
            界面
        -->
        <div class="top">
            <input type="button" value="新增订单" ng-click="add()" class="btn" />
            <input type="button" value="批量删除" class="btn" ng-click="piliang1()" />

            <input type="search" placeholder="按商品名称查询" class="name_s" ng-keydown="gname_cha($event)" ng-model="gname">
            <input type="search" placeholder="按手机号查询" class="tel_s" ng-keydown="tel_cha($event)" ng-model="tel">
            <select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
                <option >--按状态查询--</option>
                <option >已发货</option>
                <option >未发货</option>
            </select>
        </div>
        <table border="1px" cellspacing="0px" cellpadding="0px" class="table">
            <tr>
                <td><input type="checkbox" class="cb_top" /></td>
                <td>id<input type="button" value="排序" class="btn" ng-click="id_paixu()" /></td>
                <td>商品名</td>
                <td>用户名</td>
                <td>手机号</td>
                <td>价格<input type="button" value="排序" class="btn" ng-click="jiage_paixu()" /></td>
                <td>城市</td>
                <td>下单时间<input type="button" value="排序" class="btn" ng-click="shijian_paixu()" /></td>
                <td>状态</td>
            </tr>
            <tr ng-repeat="g in goods">
                <td><input type="checkbox" class="cb_good" ng-click = "change2($index)"/></td>
                <td>{{g.id}}</td>
                <td>{{g.gname}}</td>
                <td>{{g.user}}</td>
                <td>{{g.tel}}</td>
                <td>{{g.price|currency:"￥："}}</td>
                <td>{{g.city}}</td>
                <td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                <td><input type="button" value="{{g.state|myFilter}}" class="{{g.state}}" ng-click="fahuo1($index)" /></td>
            </tr>
        </table>
        <!--
            下部
        -->
        <div class="bottom" ng-show = "show">
            <input type="button" value="添加商品信息" />
            <fieldset>
                <legend>添加订单信息</legend>
                商品名:<input type="text" class="add_gname" ng-model="gname12" ng-init="name12='oppo'"/><span class="gname_tip"></span><br> 用户名:
                <input type="text" class="add_user" ng-model="user12"/><span></span><br> 手机号:
                <input type="text" class="add_tel" ng-model="tel12"/><span></span><br> 价格为:
                <input type="text" class="add_price" ng-model="price12"/><span></span><br>
                <select ng-model="city12" ng-init="city12='--请选择城市--'" class="add_city">
                    <option>--请选择城市--</option>
                    <option>北京</option>
                    <option>云南</option>
                    <option>成都</option>
                </select>
                <button ng-click="add2()">保存</button>
            </fieldset>

        </div>
        <script type="text/javascript">
            var mo = angular.module("myApp", []);
            mo.controller("myCtrl", function($scope) {
                    //初始数据
                    var arr = [{
                        "id": 2001,
                        "isChecked": false,
                        "gname": "iphoneX",
                        "user": "张三",
                        "tel": 12345678998,
                        "price": 8699.00,
                        "city": "北京",
                        "time": new Date(167808).getTime(),
                        "state": false
                    }, {
                        "id": 3006,
                        "isChecked": false,
                        "gname": "iphone6",
                        "user": "lisi",
                        "tel": 132898765765,
                        "price": 5638.00,
                        "city": "郑州",
                        "time": new Date(1688888).getTime(),
                        "state": false
                    }, {
                        "id": 5312,
                        "isChecked": false,
                        "gname": "iphone7",
                        "user": "赵小龙",
                        "tel": 15072656676,
                        "price": 6180.00,
                        "city": "北京",
                        "time": new Date(21312312).getTime(),
                        "state": false
                    }, {
                        "id": 2132,
                        "isChecked": false,
                        "gname": "iphone8",
                        "user": "赵强",
                        "tel": 186765446788,
                        "price": 7190.00,
                        "city": "上海",
                        "time": new Date(543534534534).getTime(),
                        "state": false
                    }];
                    //初始haul界面
                    $scope.goods = arr;
                    //发货
                    $scope.fahuo1 = function($index) {

                            arr[$index].state = true;
                        }
                        //根据名字查询
                    $scope.gname_cha = function($event) {
                            var arr_temp = []; //定义临时数组
                            var keyCode = $event.keyCode;
                            if (keyCode == 13) {
                                //遍历数组查询
                                for (var i = 0; i < arr.length; i++) {
                                    if (arr[i].gname.indexOf($scope.gname) != -1) {
                                        arr_temp.push(arr[i]);
                                    }
                                }
                                //赋值
                                $scope.goods = arr_temp;
                            }
                        }
                        //根据手机号查询
                    $scope.tel_cha = function($event) {
                            var arr_temp = []; //定义临时数组
                            var keyCode = $event.keyCode;
                            if (keyCode == 13) {
                                //遍历数组查询
                                for (var i = 0; i < arr.length; i++) {
                                    var t = arr[i].tel.toString();
                                    if (t.indexOf($scope.tel) != -1) {
                                        arr_temp.push(arr[i]);
                                    }
                                }
                                //赋值
                                $scope.goods = arr_temp;
                            }
                        }
                        //筛选发货/未发货
                    $scope.isFaHuo = function() {
                            //定义一个临时数组，储存对象
                            var arr_temp = [];
                            //获取select里面的值
                            var f = $scope.fahuo;
                            if (f == "已发货") {
                                for (var i = 0; i < arr.length; i++) {
                                    var f1 = arr[i].state; //获取发货状态
                                    if (f1) {
                                        arr_temp.push(arr[i]);
                                    }
                                }
                            } else {
                                for (var i = 0; i < arr.length; i++) {
                                    var f1 = arr[i].state; //获取发货状态
                                    if (f1 == false) {
                                        arr_temp.push(arr[i]);
                                    }
                                }
                            }
                            //赋值
                            //goods 自负责显示 MVVM
                            //arr   负责数据
                            //临时arr_temp 临时储存结果
                            $scope.goods = arr_temp;
                        }
                        //根据id排序
                    var id_flag = true;
                    $scope.id_paixu = function() {
                        if (id_flag) {
                            arr.sort(function(a, b) {
                                return a.id - b.id;
                            });
                        } else {
                            arr.sort(function(a, b) {
                                return b.id - a.id;
                            });
                        }
                        id_flag = !id_flag;
                        $scope.goods = arr;
                    }
                    //根据价格排序
                    var price_flag = true;
                    $scope.jiage_paixu = function(){
                        if (price_flag) {
                            arr.sort(function(a, b) {
                                return a.price - b.price;
                            });
                        } else {
                            arr.sort(function(a, b) {
                                return b.price - a.price;
                            });
                        }
                        price_flag = !price_flag;
                        $scope.goods = arr;
                    }
                    //批量删除
                    $scope.piliang1 = function(){
                        //遍历数组，如果isCheck = true,而且state = true;删除，否则不删除
                        for (var i = arr.length-1;i>=0;i--) {
                            var g = arr[i];
                            var c = g.isChecked;
                            var s = g.state;
                            console.log(c+"--"+s)
                            if (c&&s) {
                                arr.splice(i,1);
                            }
                        }
                        $scope.goods=arr;

                    }
                    //点击复选框，改变选中状态
                    $scope.change2 = function($index){
                        arr[$index].isChecked = !arr[$index].isChecked;
                        $scope.goods=arr;
                    }
                    //点击新增，下面显示
                    $scope.add = function(){
                        $scope.show = true;
                    }

                    //定义一个方法，随机数
                    function suiji(){
                        var m = Math.random()*10000;
                        return m;
                    }
                    //保存
                    $scope.add2 = function(){
                        //取值
                        var name12 = $(".add_gname").val();
                        var user12 = $(".add_user").val();
                        var tel12 = $(".add_tel").val();
                        var price12 = $(".add_price").val();
                        var city12 = $(".add_city").val();
                        //判断是否为空
                        if(name12==""){
                            //边框变红
                            //span显示文字
                            $(".add_gname").css({"border":"1px solid red"})
                            $(".gname_tip").text("用户名不能为空");
                            return;
                        }
                        //创建对象
                        var g = {
                        "id": suiji(),
                        "isChecked": false,
                        "gname": name12,
                        "user": user12,
                        "tel": tel12,
                        "price": price12,
                        "city": city12,
                        "time": new Date().getTime(),
                        "state": false
                        };
                        //添加
                        arr.push(g);
                        $scope.goods = arr;
                        //隐藏
                        $scope.show = false;
                    }
                })
                //自定义过滤器，根据state的状态，返回不同的值
            mo.filter("myFilter", function() {

                return function(input) {  
                    if (input) {
                        return "已发货";
                    } else {
                        return "未发货";
                    }
                    return input;
                }

            })

        </script>
    </body>
Stagefright
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angularjs 增删改查 点击按钮排序
chy521xin的博客
01-16 623
tbody tr:nth-child(even){ background-color: pink; } tbody tr:nth-child(odd){ background-color: yellow; } var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $
Angularjs 增 删 改 查
we1601r的博客
01-19 194
var app = angular.module("myapp",[]); app.controller("myctrl",function($scope){ $scope.username = [{ ck:false, id:1, sname:"oppo R9sk", name:"关羽", shou:"12346578911", pric
angularjs的发货,已发货切换
love_mysunshine的博客
10-25 173
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--样式--> <style> td,th{ width: 120px; height: 60px; bord
angularjs增删 查询 排序(修改)
lian895615的博客
12-15 195
月考练习                      *{                 margin: 0 auto;                 padding: 0;             }             nav{                 width: 50%;                 margin-top: 50px;
angularJs 增删改查
chy521xin的博客
01-16 310
tbody tr:nth-child(even) { background-color: pink; } tbody tr:nth-child(odd) { background-color: yellow; } var app = angular.module("myApp", []); app.controller("myCtrl", function($scop
angularjs增删改查
qq_41636736的博客
01-16 219
.an1{background-color: chartreuse;}    .an2{background-color: chartreuse;}    .an3{background-color:red;}        tbody tr:nth-child(even) {     background-color: aqua;    }        tbody tr:nth
angularJS增删改查
qq_41636756的博客
01-16 131
tr:nth-child(even){ background-color: darkgray; } tr:nth-child(odd){ background-color: bisque; } var app=angular.module("myapp",[]); app.controller("mycon",function($scope){ $scope.isSho
angularJS增删改查敏感字
qq_41636736的博客
01-17 178
.an1{background-color: chartreuse;}    .an2{background-color: chartreuse;}    .an3{background-color:red;}        tbody tr:nth-child(even) {     background-color: aqua;    }        tbody tr:nth
angularjs实现 - 增删改查+排序+敏感字（最终版）
人走丿茶凉
10-26 2356
本篇博客将要实现的效果，包括添加信息、修改信息、查询信息、删除信息、对信息排序/敏感字过滤！与上一篇文章不同的是：优化了界面效果，实现敏感字过滤，bug修复将要用到：HTML，CSS，AngularJS，jQuery先来看一下主界面效果： 新增订单表单界面： 修改订单信息界面： 想要实现所有的功能，要实现以下几点： 首先看一下主界面实现的代码（HTML文件）：<!DOCTYPE html>
AngularJS模块化开发--增删改查
12-13
AngularJS模块化开发实例--增删改查项目源码（涉及requirejs、Bootstrap、ng路由跳转等）
angularjs增删 改查
08-06
angularjs 列表增删改查
AngularJS实现表格的增删改查（仅限前端）
10-19
主要介绍了AngularJS实现表格的增删改查，仅限前端，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angularjs 实现增删改查
01-28
angularjs 实现mysql数据库的增删改查demo 后台使用java
AngularJS中如何使用$http对MongoLab数据表进行增删改查
10-22
主要介绍了AngularJS中如何使用$http对MongoLab数据表进行增删改查的相关资料,需要的朋友可以参考下
二级理论题（选择83+判断96）.xlsx
05-07
二级理论题（选择83+判断96）.xlsx
2024年中国超声非侵入式腐蚀检测传感器行业研究报告.docx
05-07
2024年中国超声非侵入式腐蚀检测传感器行业研究报告
设备OEE实践与教学知识
最新发布
05-07
设备自动化综合利用率实践，详细描述了OEE各方面的参数与应用，让设备自动化工厂利用此工具可以快速提高生产
tensorflow-gpu-2.2.3-cp37-cp37m-win-amd64.whl
05-07
python
用angularJS写网页增删改查的实验目的
06-02
3. 学会使用AngularJS实现网页增删改查功能； 4. 提高前端开发能力，为实际项目开发打下基础。 实验内容： 1. 学习AngularJS的基础知识，包括模块、控制器、指令、服务等； 2. 设计网页的数据模型，包括表单、列表...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值