angular 增，删，查，排序

最新推荐文章于 2018-12-30 16:00:00 发布
原创 最新推荐文章于 2018-12-30 16:00:00 发布 · 263 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用AngularJS实现的订单管理系统案例，展示了如何通过AngularJS进行数据双向绑定、条件筛选、排序等功能，并提供了完整的HTML和JavaScript代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <style>
            * {
                margin: 0px auto;
                padding: 0px;
            }
            
            .tre1 {
                border-radius: 20px;
            }
            
            .div1 {
                margin-top: 10px;
                width: 650px;
            }
            
            .bu1 {
                background: cyan;
                width: 70px;
                height: 30px;
                border-radius: 6px;
            }
            
            .bu2 {
                background: cyan;
                border-radius: 5px;
            }
            
            .tab {
                width: 760px;
            }
            
            .tab td {
                text-align: center;
            }
            
            .im1 {
                width: 20px;
                height: 20px;
            }
            
            .im2 {
                width: 20px;
                height: 20px;
            }
            
            .true {
                background: greenyellow;
                border: 0px;
                border-radius: 3px;
            }
            
            .false {
                background: yellow;
                border: 0px;
                border-radius: 3px;
            }
            
            .fie {
                width: 760px;
            }
            
            .div3 {
                margin-left: 200px;
            }
            
            #bao {
                width: 150px;
                height: 30px;
                margin-left: 230px;
            }
        </style>
    </head>

    <body ng-app="myapp" ng-controller="cre">
        <div class="div1">
            <input type="button" value="新增表单" class="bu1" ng-click="add()" />&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="批量删除" class="bu1" ng-click="pi()" />&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" placeholder="按商品名称查询" class="tre1" ng-model="shang" /><img src="img/a1.png" class="im1" ng-click="im1()" />&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" placeholder="按手机号查询" class="tre1" ng-model="shou" /><img src="img/a1.png" class="im2" ng-click="im2()" />&nbsp;&nbsp;
            <select ng-change="isFaHuo()" ng-model="zhuang" ng-init="zhuang='--按状态查询--'">
                <option>--按状态查询--</option>
                <option>未发货</option>
                <option>已发货</option>
            </select>
        </div><br />
        <div class="div2">
            <table border="1px" cellspacing="0px" class="tab">
                <th><input type="checkbox" ng-model="che" ng-click="box1()" /></th>
                <th>id<input type="button" value="排序" class="bu2" ng-click="xuid()" /></th>
                <th>商品名</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>价格<input type="button" value="排序" class="bu2" ng-click="jia()" /></th>
                <th>城市</th>
                <th>下单时间<input type="button" value="排序" class="bu2" ng-click="shijian()" /></th>
                <th>状态</th>
                <tr ng-repeat="good in goods|filter:bb">
                    <td><input type="checkbox" ng-model="good.ckx" /></td>
                    <td>{{good.uid}}</td>
                    <td>{{good.uname}}</td>
                    <td>{{good.name}}</td>
                    <td>{{good.tel}}</td>
                    <td>￥{{good.price}}</td>
                    <td>{{good.cheng}}</td>
                    <td>{{good.shi|date:"MM-dd hh:mm:ss"}}</td>
                    <td><input type="button" value="{{good.fal|myfil}}" class="{{good.fal}}" ng-click="fahuo($index)" /></td>
                </tr>
            </table>
        </div>

        <fieldset class="fie" ng-show="show">
            <legend>添加订单信息</legend>
            <div class="div3">
                商品名<input type="text" ng-model="uname1" id="uname1" /><span style="color: red;" id="sp1"></span><br /> 用户名:
                <input type="text" ng-model="yong" id="yong" /><span style="color: red;" id="sp2"></span><br /> 手机号：
                <input type="text" ng-model="utel1" id="utel1" /><span style="color: red;" id="sp3"></span><br /> 价格为：
                <input type="text" ng-model="uprice1" id="uprice1" /><span style="color: red;" id="sp4"></span><br /> 城市：
                <select ng-model="chengshi" ng-init="chengshi='--请选择城市--'" id="chengshi">
                    <option>--请选择城市--</option>
                    <option>北京</option>
                    <option>上海</option>
                    <option>天津</option>
                    <option>南京</option>
                </select><span style="color: red;" id="sp5"></span><br /> <br />
            </div>
            <input type="button" value="保存" id="bao" ng-click="bao()" />
        </fieldset>

    </body>

    <script>
        //注入
        var mo = angular.module("myapp", []);
        //创建控制器
        mo.controller("cre", function($scope) {
            //定义数组
            var arr = [{
                    "uid": "2001",
                    "uname": "iPhoneX",
                    "name": "张三",
                    "tel": 110,
                    "price": 8669.00,
                    "cheng": "北京",
                    "shi": new Date(543534534534).getTime(),
                    "fal": false
                },
                {
                    "uid": "6006",
                    "uname": "iPhone6",
                    "name": "王红",
                    "tel": 120,
                    "price": 7669.00,
                    "cheng": "上海",
                    "shi": new Date(243534534534).getTime(),
                    "fal": false
                },
                {
                    "uid": "5316",
                    "uname": "iPhone7",
                    "name": "赵小红",
                    "tel": 130,
                    "price": 7999.00,
                    "cheng": "河北",
                    "shi": new Date(343534534534).getTime(),
                    "fal": false
                },
                {
                    "uid": "5312",
                    "uname": "华为10",
                    "name": "李四",
                    "tel": 220,
                    "price": 19999.00,
                    "cheng": "天津",
                    "shi": new Date(54353453423).getTime(),
                    "fal": false
                }
            ];
            //初始化界面
            $scope.goods = arr;

            //点击显示表单
            $scope.add = function() {
                $scope.show = true;
            }
            //已发货和未发货
            $scope.fahuo = function($index) {
                arr[$index].fal = !arr[$index].fal;
            }

            //全选和全不选
            $scope.box1 = function() {
                var aa = $scope.che;
                if(aa == true) {
                    for(var i = 0; i < $scope.goods.length; i++) {
                        $scope.goods[i].ckx = true;
                    }
                } else {
                    for(var i = 0; i < $scope.goods.length; i++) {
                        $scope.goods[i].ckx = false;
                    }
                }
            }

            //批量删除
            $scope.pi = function() {
                for(var i = 0; i < $scope.goods.length; i++) {
                    //获取是否发货的值
                    var ff = $scope.goods[i].fal;
                    if($scope.goods[i].ckx == true && ff == true) {
                        $scope.goods.splice(i, 1);
                        i--;
                    }
                }
            }

            //商品名称查询方法
            $scope.im1 = function() {
                if($scope.shang == "" || $scope.shang == null) {
                    alert("请输入商品名称");
                    $scope.bb = $scope.shang;
                    return;
                }
                $scope.bb = $scope.shang;
            }

            /*//根据商品名称查询第二种方法
            输入框加上这个键盘监听事件ng-keydown="gname_cha($event)"
            $scope.im1 = function($event) {
                    var arr_temp = []; //定义临时数组
                    var keyCode = $event.keyCode;
                    if (keyCode == 13) {
                        //遍历数组查询
                        for (var i = 0; i < arr.length; i++) {
                            if (arr[i].uname.indexOf($scope.shang) != -1) {
                                arr_temp.push(arr[i]);
                            }
                        }
                        //赋值
                        $scope.goods = arr_temp;
                    }
                }*/

            //手机号查询方法
            $scope.im2 = function() {
                if($scope.shou == "" || $scope.shou == null) {
                    alert("请输入手机号");
                    $scope.bb = $scope.shang;
                    return;
                }
                $scope.bb = $scope.shou;
            }

            //id排序
            var xuid1 = true;
            $scope.xuid = function() {
                if(xuid1) {
                    arr.sort(function(a, b) {
                        return a.uid - b.uid;
                    });
                } else {
                    arr.sort(function(a, b) {
                        return b.uid - a.uid;
                    });
                }
                xuid1 = !xuid1;
                $scope.goods = arr;

            }
            //价格排序
            var jia1 = true;
            $scope.jia = function() {
                if(jia1) {
                    arr.sort(function(a, b) {
                        return a.price - b.price;
                    });
                } else {
                    arr.sort(function(a, b) {
                        return b.price - a.price;
                    });
                }
                jia1 = !jia1;
                $scope.goods = arr;

            }

            //时间排序
            var jian = true;
            $scope.shijian = function() {
                if(jian) {
                    arr.sort(function(a, b) {
                        return a.shi - b.shi;
                    })
                } else {
                    arr.sort(function(a, b) {
                        return b.shi - a.shi;
                    });
                }
                jian = !jian
                $scope.goods = arr;
            }

            //按状态查询
            $scope.isFaHuo = function() {
                //定义一个临时数组，储存对象
                var arr_temp = [];
                //获取select里面的值
                var f = $scope.zhuang;
                if(f == "已发货") {
                    for(var i = 0; i < arr.length; i++) {
                        var f1 = arr[i].fal; //获取发货状态
                        if(f1) {
                            arr_temp.push(arr[i]);
                        }
                    }
                } else {
                    for(var i = 0; i < arr.length; i++) {
                        var f1 = arr[i].fal; //获取发货状态
                        if(f1 == false) {
                            arr_temp.push(arr[i]);
                        }
                    }
                }
                $scope.goods = arr_temp;
            }

            //id方法
            function a1() {
                //随机整数
                var uid = Math.floor(Math.random() * 10000)
                return uid;
            }

            //判断商品名称的方法
            var fl1 = false;

            function a2() {
                var uname1 = $scope.uname1;
                if(uname1 == "" || uname1 == null) {
                    $("#sp1").text("商品名称不能为空")
                    $("#uname1").css("border-color", "red")
                    fl1 = false;
                } else {
                    $("#sp1").text("");
                    $("#uname1").css("border-color", "")
                    fl1 = true;
                }
            }
            //判断用户名
            var fl2 = false;

            function a3() {
                var yong = $scope.yong;
                if(yong == "" || yong == null) {
                    $("#sp2").text("用户名称不能为空")
                    $("#yong").css("border-color", "red")
                    fl2 = false;
                } else {
                    $("#sp2").text("");
                    $("#yong").css("border-color", "")
                    fl2 = true;
                }
            }

            //判断手机号
            var fl3 = false;

            function a4() {
                var utel1 = $scope.utel1;
                if(utel1 == "" || utel1 == null) {
                    $("#sp3").text("手机号不能为空")
                    $("#utel1").css("border-color", "red")
                    fl3 = false;
                } else {
                    var aa = /^[0-9]*$/
                    if(!aa.test(utel1)) {
                        $("#sp3").text("手机号为纯数字")
                        $("#utel1").css("border-color", "red")
                        fl3 = false;
                    } else {

                        $("#sp3").text("");
                        $("#utel1").css("border-color", "")
                        fl3 = true;
                    }
                }
            }
            //判断价格
            var fl4 = false;

            function a5() {
                //不能为空
                var uprice1 = $scope.uprice1;
                if(uprice1 == "" || uprice1 == null) {
                    $("#sp4").text("价格不能为空")
                    $("#uprice1").css("border-color", "red")
                    fl4 = false;
                } else {
                    $("#sp4").text("")
                    $("#uprice1").css("border-color", "")
                    var jia = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                    if(!jia.test(uprice1)) {
                        $("#sp4").text("价格为整数或小数")
                        $("#uprice1").css("border-color", "red")
                        fl4 = false;
                    } else {

                        fl4 = true
                    }
                }
            }
            //判断城市
            var fl5=false;
            function a6() {
                var chengshi = $scope.chengshi;
                if(chengshi=="--请选择城市--"){
                    $("#sp5").text("城市必须选择")
                    $("#chengshi").css("border-color", "red")
                    fl5=false
                }else{
                    $("#sp5").text("")
                    $("#chengshi").css("border-color", "")
                    fl5=true
                }
            }
            

            //添加方法
            $scope.bao = function() {
                a2();
                if(fl1 == true) {
                    a3();
                    if(fl2 == true) {
                        a4();
                        if(fl3 == true) {
                            a5();
                            if(fl4 == true) {
                                a6();
                                if(fl5==true){
                                        //创建对象
                                var g = {
                                    "uid": a1(),
                                    "uname": $scope.uname1,
                                    "name": $scope.yong,
                                    "tel": $scope.utel1,
                                    "price": $scope.uprice1,
                                    "cheng": $scope.chengshi,
                                    "shi": new Date().getTime(),
                                    "fal": false
                                };
                                //添加
                                arr.push(g);
                                $scope.goods = arr;
                                //隐藏表单
                                $scope.show = false;
                                /*//清空
                                if($scope.show == false) {
                                    $(".div3 input").val("");
                                    $(".div3 select").val("--请选择城市--");
                                }*/
                                }
                            
                            }
                        }

                    }
                }

            }

        });
        //自定义过滤器
        mo.filter("myfil", function() {
            return function(fal) {
                if(fal) {
                    return "已发货"

                } else {
                    return "未发货";
                }
            }
            return fal;
        })
    </script>

</html>
duderi1
关注
angular增删改查，json文件格式
aa15362415的博客
01-19 1178
var app=angular.module("myApp",[]);            app.controller("myCtrl",function($scope,$http){                $scope.kong=false;                $http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa
angular增删改查2
Android_ElitePerson的博客
04-26 323
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;link rel="style
angular 增删改查
weixin_39599065的博客
12-18 433
var app = angular.module("myapp",[]);    app.controller("my",function($scope){     //隐藏框     $scope.add = false;     //模拟数据     $scope.user = [{     id:1,     yonghu:"曹操",     nianling:15,   
angular增删改查（全面细节）
Melect的博客
02-28 2277
angular增删改查                                   var app = angular.module("anan", []);               app.controller("enen", function($scope) {                   //数据                   $scope.user =
angular 增删改查 排序
E_D_I_E的博客
04-02 253
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!--http://blog.csdn.net/nvzizhou/article/details/46360607,自动适应屏幕 width - viewport的宽度 height - viewport的高度 initia...
angular增删改查
LiShaoJie_521的博客
03-29 286
&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /&gt; 
angular之增删改查
12-30 453
angular之增删改查 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset...
angular 熟练使用（demo）增删改查 排序
Jonly_W的博客
01-18 583
var app=angular.module("myApp",[])         app.controller("myCtrl",function($scope,$http){             $scope.josnnet="";             $http({                 method:"get",                 url:"ht
html_angular 增删改查+验证 ++
暴风雨的博客
01-09 336
大工程增删改查 var app = angular.module("anan", []); app.controller("enen", function($scope) { $scope.user = [{ ck:false, id: 1, name: '李1', pwd: 123456, level: 3
angular增删改查无异议
Guiyide的博客
01-19 307
#nameid{                 border-radius: 10px;             }             #addressid{                 border-radius: 10px;             }             table tr:nth-child(even){                 back
angular+bootstrap 列表增删查改
09-22
总的来说，"angular+bootstrap 列表增删查改"项目提供了一个高效、实用的前端解决方案，适合初学者学习Angular和Bootstrap，也适用于开发者快速搭建列表管理功能。通过理解和实践这个项目，开发者可以深入理解前端...
angularjs增删 改查
08-06
这个框架的核心特性在于其数据绑定和依赖注入机制，极大地简化了前端开发，特别是对于实现列表的增删改查功能，AngularJS 提供了丰富的工具和API。 在AngularJS中，"增删改查"是数据管理的基本操作，通常涉及到以下...
oa.zip_OA做增删改查
09-24
"oa.zip_OA做增删改查"这个压缩包文件可能包含了一个基本的OA系统的实现，主要专注于核心的数据管理功能，即增删改查（CRUD：Create, Read, Update, Delete）。下面将详细介绍这些功能以及与之相关的知识点。 **1. ...
计算机毕设源码Java-ssm628企业人事管理系统+vue+配套开发环境等文件.zip
08-24
本项目是基于Java-ssm628企业人事管理系统，结合Vue前端框架开发的一款综合性人事管理平台。系统旨在通过信息化手段提升企业人事管理效率，减少人工操作成本。主要功能包括员工信息管理、考勤记录、薪资计算、绩效评估、招聘流程管理等模块，支持数据统计与报表生成，方便管理者快速掌握人事动态。后端采用SSM（Spring+SpringMVC+MyBatis）框架，确保系统稳定性和扩展性，前端使用Vue.js实现响应式界面，提升用户体验。开发此项目的目的是为了解决传统人事管理中信息分散、流程繁琐的问题，通过数字化手段优化管理流程，提高企业运营效率。系统配套完整的开发环境文件，便于开发者快速部署和二次开发。毕设项目源码常年开发定制更新，希望对需要的同学有帮助。
基于Matlab Simulink平台的IEEE9节点系统仿真：潮流计算与稳定性分析
最新发布
08-24
如何在Matlab/Simulink平台上搭建IEEE9节点系统仿真模型，并进行了潮流计算和稳定性分析。首先，通过合理配置电力系统的基本构成元素，构建了一个贴近实际的电力网络模型，并采用牛拉法进行潮流计算，验证了模型的准确性。其次，文章进一步探讨了该模型在暂态和静态稳定性仿真分析中的应用，帮助深入了解电力系统的运行状态，及时发现潜在问题，为电力系统的优化运行提供了依据。 适合人群：电力系统工程师、研究人员和技术爱好者，尤其是那些希望深入了解电力系统仿真和稳定性分析的人群。 使用场景及目标：① 构建和验证IEEE9节点系统仿真模型；② 进行潮流计算，确保模型准确性；③ 开展暂态和静态稳定性仿真分析，评估电力系统的稳定性和优化运行。 阅读建议：读者应具备一定的电力系统基础知识和Matlab/Simulink使用经验，以便更好地理解和实践文中所述的内容。同时，建议结合实际案例进行练习，以加深对理论知识的理解。
基于 go-cqhttp 的 typescript 实现的 QQ bot 框架，实现参考自 Mirai-js.zip
08-24
基于 go-cqhttp 的 typescript 实现的 QQ bot 框架，实现参考自 Mirai-js.zip
基于Altium Designer与Proteus 7.8的数字电压表仿真设计：Keil编译器下的C语言程序与LED数码管显示实现，测量范围0～5V，最小分辨率与误差为±0.01V。
08-24
基于51单片机的数字电压表的设计与实现过程。该项目利用Altium Designer绘制原理图并进行PCB布局，采用Proteus 7.8进行仿真验证，使用Keil C语言编译器编写程序。硬件方面，选用ADC0804作为模数转换芯片，配合共阴极四位LED数码管用于电压显示。软件部分涵盖了从初始化设置、ADC读取到电压计算以及数码管动态扫描显示的具体实现方法。文中还特别提到了一些优化措施如电源滤波、多次采样求均值以提高测量精度。 适用人群：对嵌入式系统开发感兴趣的电子工程技术人员、高校相关专业学生及DIY爱好者。 使用场景及目标：适用于需要精确测量直流电压的应用场合，如实验室设备校准、教学演示实验等。目标是帮助读者掌握51单片机的基本应用技巧，了解模数转换的工作原理及其在实际项目中的运用。 其他说明：文中提供的完整资料包（含程序源码、仿真文件、原理图、PCB文件）有助于初学者快速入门并深入理解整个项目的开发流程。
基于go的web开发.zip
08-24
基于go的web开发.zip
Angular增删改查实战教程——Boss项目案例解析
标题中提到的“angular 学习，增删改查”，描述中的“基于boss项目抽取出来”，以及标签中的“angularjs”，都指向了一个具体的学习目标和场景：使用AngularJS框架来实现一个常见的Web应用程序功能——增删改查...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值