angular 的小应用 增删查 排序等
来源：互联网 发布：epson机器人编程 编辑：程序博客网 时间：2024/06/06 05:35
- 完成页面布局，如图所示。
- 声明数据对象，初始化订单信息，数据自拟且不低于四条
- 用ng-repaet指令将对象遍历并渲染到页面中。
- 使用AngularJS过滤器实现搜索功能。在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息；在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息。
- 用户可以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货。如：用户点击下拉菜单选择”已发货”则查询出已发货的所有订单。
- 用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色。
- 实现订单批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单。
- 订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列。
- 订单列表中信息中价格前需要添加”￥：”，订单时间需要格式为：”月-日 时：分：秒”。
- 添加订单信息。提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色，如果表单有误则提交不成功，如果表单无误则提交成功，提交成功的信息在列表展示。
<head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/angular.min.js"></script></head><style> #div1 { width: 800px; height: 50PX; background: yellow; } input { margin-top: 10px; } table { margin-top: 20px; width: 800px; height: 50PX; text-align: center; } .inp1 { background: #5CD6FF; } .true { background: greenyellow; } .false { background: yellow; } .div2 { width: 800px; border: 1px solid black; } /*隔行换色*/ tr:nth-of-type(odd) { background: white; } /*隔行换色*/ tr:nth-of-type(even) { background: #EEEEEE; } /*处焦换色*/ tr:nth-of-type(odd):hover { background: blue; } /*处焦换色*/ tr:nth-of-type(even):hover { background: blue; }</style><body ng-app="myapp" ng-controller="mycontroller"> <div id="div1"> <input type="button" value="新增订单" ng-click="xx1()" /> <input type="button" value="批量删除" style="margin-left: 20px;" ng-click="dele($index)" /> <input type="text" placeholder="按商品名查询" style="margin-left: 20px;" ng-keydown="huiche($event)" ng-model="name_s" /> <input type="text" placeholder="按手机号名查询" style="margin-left: 20px;" ng-keydown="huiche2($event)" ng-model="tell_s" /> <select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'"> <option>--按状态查询--</option> <option>已发货</option> <option>未发货</option> </select> </div> <table border="1px" cellspacing="0" cellpadding="0"> <tr style="background: grey;"> <td><input type="checkbox" /></td> <td>id<input type="button" value="排序" class="inp1" ng-click="id_px()" /></td> <td>商品名</td> <td>用户名</td> <td>手机号</td> <td>价格<input type="button" value="排序" class="inp1" ng-click="price_px()" /></td> <td>城市</td> <td>下单日期 <input type="button" value="排序" class="inp1" ng-click="date_px()" /></td> <td>状态</td> </tr> <tr ng-repeat="good in goods"> <td><input type="checkbox" ng-click="shifou($index)" /></td> <td>{{good.id}}</td> <td>{{good.gname}}</td> <td>{{good.user}}</td> <td>{{good.tel}}</td> <td>{{good.price|currency:"￥："}}</td> <td>{{good.city}}</td> <td>{{good.time|date:"yyyy-MM-dd HH-mm-ss"}}</td> <td><input type="button" value="{{good.state|myfilter}}" class="{{good.state}}" ng-click="fahuo1($index)" /></td> </tr> </table> <fieldset class="div2" style="margin-top: 50px;" ng-show="show1"> <center> <h1>新增订单</h1> </center> <legend>添加订单信息</legend> <center> 商品名：<input type="text" id="s1" ng-model="shapp2" /> <span id="sp1"></span> </br> 用户名：<input type="text" id="n1" ng-model="name2" /> <span id="sp2"></span> </br> 手机号：<input type="text" id="t1" ng-model="tell1" /> <span id="sp3"></span> </br> 价格为：<input type="text" id="p1" ng-model="price1" /> <span id="sp4"></span> </br> 城 市 : <select ng-change="changsi()" id="c1" ng-model="cs1" ng-init="cs1='--按状态查询--'" style="width: 180px;"> <option>--按状态查询--</option> <option>河南</option> <option>河北</option> <option>山西</option> </select> <span id="sp5"></span> </br> <input type="button" value="保存" ng-click="bz()" /> </center> </fieldset> <script type="text/javascript"> var mo = angular.module("myapp", []); mo.controller("mycontroller", function($scope) { //初始数据 var arr = [{ "id": 2001, "isChecked": false, "gname": "iphoneX", "user": "张三", "tel": 12345678998, "price": 8699.00, "city": "北京", "time": new Date(16666456).getTime(), "state": false }, { "id": 3006, "isChecked": false, "gname": "iphone6", "user": "lisi", "tel": 132898765765, "price": 5638.00, "city": "郑州", "time": new Date(1678645).getTime(), "state": false }, { "id": 5312, "isChecked": false, "gname": "iphone7", "user": "赵小龙", "tel": 15072656676, "price": 6180.00, "city": "北京", "time": new Date(12546546546543).getTime(), "state": false }, { "id": 2132, "isChecked": false, "gname": "iphone8", "user": "赵强", "tel": 186765446788, "price": 7190.00, "city": "上海", "time": new Date(167864554).getTime(), "state": false }]; //把数据赋给显示数组 $scope.goods = arr; //回车查询商品名事件 $scope.huiche = function($event) { var names_1 = []; //临时数组 var hui = $event.keyCode //获取回车事件的触发 var name = $scope.name_s; //获取输入框的值 if(hui == 13) { //回车 触发值是13 for(var i = 0; i < arr.length; i++) { if(arr[i].gname.indexOf(name) != -1) { //循环获取数组的name值如果包含name值 names_1.push(arr[i]); //赋给我的临时数组 } } $scope.goods = names_1; //赋给显示数组 } } $scope.huiche2 = function($event) { var tell_1 = []; //临时数组 var hui = $event.keyCode; //获取回车事件的触发 var tell = $scope.tell_s; //获取输入框的值 if(hui == 13) { //回车 触发值是13 for(var i = 0; i < arr.length; i++) { //循环获取数组的电话的值如果包含tell值 if(arr[i].tel.indexOf(tell)) { tell_1.push(arr[i] != -1); //赋给我的临时数组 } } $scope.goods = tell_1; //赋给显示数组 } } $scope.fahuo1 = function($index) { //状态赋值 arr[$index].state = !arr[$index].state; } $scope.isFaHuo = function() { //状态的下拉事件 var fh = []; //临时数组 var zt1 = $scope.fahuo; //取出状态 if(zt1 == "已发货") { for(var i = 0; i < arr.length; i++) { var f = arr[i].state; //取出state的值 if(f) { //等于true fh.push(arr[i]); //赋值给临时数组 } } } else { for(var i = 0; i < arr.length; i++) { var f1 = arr[i].state; //取出state的值 if(f1 == false) { //等于false fh.push(arr[i]); //赋值给临时数组 } } } $scope.goods = fh; //赋给显示数组 //跟据状排序 //id排序 var id_flas1 = false; //标识符 $scope.id_px = function() { //死格式 if(id_flas1 == false) { fh.sort(function(a, b) { return a.id - b.id }) } else { fh.sort(function(a, b) { return b.id - a.id }) } id_flas1 = !id_flas1 } var price_flas2 = true; //标识符 //价格排序 $scope.price_px = function() { if(price_flas2) { fh.sort(function(a, b) { return a.price - b.price }) } else { fh.sort(function(a, b) { return b.price - a.price }) } price_flas2 = !price_flas2 } var deta_flas2 = true; //标识符 //时间排序 $scope.date_px = function() { if(deta_flas2) { fh.sort(function(a, b) { return a.time - b.time }) } else { fh.sort(function(a, b) { return b.time - a.time }) } deta_flas2 = !deta_flas2 } } //根据未选状态排序 var id_flas = false; //标识符 //id排序 $scope.id_px = function() { if(id_flas == false) { arr.sort(function(a, b) { return a.id > b.id }) } else { arr.sort(function(a, b) { return a.id < b.id }) } id_flas = !id_flas } var price_flas = false; //标识符 //价格排序 $scope.price_px = function() { if(price_flas == false) { arr.sort(function(a, b) { return a.price > b.price }) } else { arr.sort(function(a, b) { return a.price < b.price }) } price_flas = !price_flas } var deta_flas = false; //标识符 //时间排序 $scope.date_px = function() { if(deta_flas == false) { arr.sort(function(a, b) { return a.time > b.time }) } else { arr.sort(function(a, b) { return a.time < b.time }) } deta_flas = !deta_flas } //获取checked的状态值 $scope.shifou = function($index) { $scope.goods[$index].isChecked = !$scope.goods[$index].isChecked } //批量删除 $scope.dele = function($index) { for(var i = $scope.goods.length - 1; i >= 0; i--) { //循环显示数组 var ss = $scope.goods[i].state; //取出state的值 var vv = $scope.goods[i].isChecked; //取出isChecked的值 if(vv && ss) { //都为true $scope.goods.splice(i, 1) //删除 } } } //点击的新增时间 $scope.xx1 = function() { $scope.show1 = true; //让div显示 } $scope.bz = function() { var sh2 = $scope.shapp2; var flas = true; if(sh2 == "" || sh2 == null) { $("#s1").css({ "border": "1px solid pink" }); $("#sp1").html("商品不能为空") flas = false; return } else { $("#s1").css({ "border": "1px solid black " }); $("#sp1").html("") flas = true; } var name2 = $scope.name2; var flas1 = true; if(name2 == "" || name2 == null) { $("#n1").css({ "border": "1px solid red" }); $("#sp2").html("用户名不能为空") flas1 = false; return } else { $("#n1").css({ "border": "1px solid black " }); $("#sp2").html("") flas1 = true; } var tell1 = $scope.tell1; var flas2 = true; if(tell1 == "" || tell1 == null) { $("#t1").css({ "border": "1px solid red" }); $("#sp3").html("手机号不能为空") flas2 = false; return } else { $("#sp3").html("") $("#t1").css({ "border": "1px solid black " }); flas2 = true; } var price1 = $scope.price1; var flas3 = true; if(price1 == "" || price1 == null) { $("#p1").css({ "border": "1px solid red" }); $("#sp4").html("价格不能为空") flas3 = false; return } else { $("#sp4").html("") $("#p1").css({ "border": "1px solid black " }); flas3 = true; } var cs1 = $scope.cs1; var flas4 = true; if(cs1 == "" || cs1 == null || cs1 == "--按状态查询--") { $("#c1").css({ "border": "1px solid red" }); $("#sp5").html("请选择城市") flas4 = false; return } else { $("#sp5").html("") $("#c1").css({ "border": "1px solid black " }); flas4 = true; } if(flas == true && flas1 == true && flas2 == true && flas3 == true && flas4 == true) { //随机数0-9999 var aa = Math.random() * 10000; //化为整数 var vv = Math.floor(aa); var arr1 = { "id": vv, "isChecked": false, "gname": $scope.shapp2, "user": $scope.name2, "tel": $scope.tell1, "price": $scope.price1, "city": $scope.cs1, "time": new Date(25687548).getTime(), "state": false } $scope.show1 = false;//添加成功 隐藏div arr.push(arr1);//把对象赋给初始数据arr $scope.goods = arr;//arr赋给显示数据 //把输入框赋为空 $scope.shapp2 = ""; $scope.name2 = ""; $scope.tell1 = ""; $scope.price1 = ""; //赋给初始属性 $scope.cs1 = "--按状态查询--";// } } }) //根据返回的数据确认state的值 mo.filter("myfilter", function() { return function(input) { if(input) { return "已发货";//是true赋值为已发货 } else { return "未发货";//是false赋值为已发货 } return input; } }) </script></body>阅读全文
0 0
- angular 的小应用 增删查 排序等
- angular 的简单小应用增删查改
- angular 简单的增删查
- angular的增删查 模糊查
- Angular实现的增删改查
- angular的增删改查综合使用
- angular Js的增删改查
- Angular对标签的增删改查
- angular增删查改
- Angular增删查改
- Angular增删改查
- angular 增删改查
- angular中的增删查
- Angular增删查练习
- angular增删查+css
- angular 增删改查
- angular之增删改查
- angular实现增删改查
- [转]理解LSTM网络
- 总结
- 洛谷 P2626 斐波那契数列（升级版）
- 爬取网易云音乐评论《安河桥》,进行分析
- 第十五周LeetCode
- angular 的小应用 增删查 排序等
- Maven系列之可选依赖
- LeetCode 239. Sliding Window Maximum
- View的工作原理之draw
- deeplab运行指南
- CC框架实践：实现先登录再进入目标界面的功能
- xcrun: error: invalid active developer path
- DragGridDemo 频道管理器的使用（demo）
- table导出成excel
