采用JavaScript、AngularJS实现过滤器搜索、删除、添加、排序、常用过滤器

最新推荐文章于 2022-01-14 17:01:08 发布
最新推荐文章于 2022-01-14 17:01:08 发布
阅读量339 收藏
点赞数
分类专栏： 基础项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky__cat/article/details/78810665
版权
图一

图二

实现功能:

1. 完成页面布局，如图所示。

2. 声明数据对象，初始化订单信息，数据自拟且不低于四条

3. 用ng-repaet指令将对象遍历并渲染到页面中。

4. 使用AngularJS过滤器实现搜索功能。在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息；在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息。

5. 用户可以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货。如：用户点击下拉菜单选择”已发货”则查询出已发货的所有订单。

6. 用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色。

7. 实现订单批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单。

8. 订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列。

9. 订单列表中信息中价格前需要添加”￥：”，订单时间需要格式为：”月-日 时：分：秒”。

10. 添加订单信息。提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色，如果表单有误则提交不成功，如果表单无误则提交成功，提交成功的信息在列表展示。

代码：
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>案例</title>
		<style>
			.table tbody tr:nth-child(odd) {
				background: #EEEEEE
			}
			
			.span {
				background: #FFFF00;
				border: 1px solid #000
			}
		</style>
		<script src="angularJS/angular.js"></script>
		<!--实现功能-->
		<script>
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope) {
				//定义数据源
				$scope.color = "#000";
				$scope.data = [{
					flag: false,
					id: 2001,
					name: "iPhoneX",
					user: "张三",
					tel: 13525565588,
					price: 8699,
					city: "北京",
					date: 80000000000,
					v: "已发货",
					c: "#31FE31"
				}, {
					flag: false,
					id: 3006,
					name: "iPhone6",
					user: "王红",
					tel: 18524565588,
					price: 5653,
					city: "郑州",
					date: 83000000000,
					v: "已发货",
					c: "#31FE31"
				}, {
					flag: false,
					id: 5312,
					name: "iPhone7",
					user: "赵小龙",
					tel: 17545585598,
					price: 6180,
					city: "北京",
					date: 86000000000,
					v: "未发货",
					c: "#FFFF31"
				}, {
					flag: false,
					id: 2132,
					name: "iPhone8",
					user: "赵强",
					tel: 17625565618,
					price: 7190,
					city: "上海",
					date: 90000000000,
					v: "未发货",
					c: "#FFFF31"
				}];
				//查询
				$scope.CXname = "";
				$scope.CXtel = "";
				$scope.CX = "";
				$scope.Cx = function() {
					if ($scope.CXname != "" && $scope.CXname != null) {
						$scope.CX = {
							'name': $scope.CXname
						};
					} else if ($scope.CXtel != "" && $scope.CXtel != null) {
						$scope.CX = {
							'tel': $scope.CXtel
						};
					} else {
						$scope.CX = "";
					}
					return $scope.CX;
				};
				//下拉菜单筛选
				$scope.XLcd = "";
				$scope.isShow = function(data) {
						if ($scope.XLcd == "") {
							return true;
						} else if ($scope.XLcd != "") {
							if (data == $scope.XLcd) {
								return true;
							} else {
								return false;
							}
						}
					}
					//按钮点击变色
				$scope.FH = function(data1) {
						for (d in $scope.data) {
							if ($scope.data[d].id == data1) {
								if ($scope.data[d].v == "已发货") {
									$scope.data[d].v = "未发货";
									$scope.data[d].c = "#FFFF31";
								} else {
									$scope.data[d].v = "已发货";
									$scope.data[d].c = "#31FE31";
								}
							}
						}
					}
					//全选&&全不选
				$scope.all = false;
				$scope.All = function() {
					if ($scope.all == true) {
						for (d in $scope.data) {
							if ($scope.data[d].flag == false) {
								$scope.data[d].flag = true;
							}
						}
					} else {
						for (d in $scope.data) {
							if ($scope.data[d].flag == true) {
								$scope.data[d].flag = false;
							}
						}
					}
				};
				//反选
				$scope.FX = function() {
						var a = 0;
						for (d in $scope.data) {
							if ($scope.data[d].flag == false) {
								a++;
							}
						}
						if (a > 0) {
							$scope.all = false;
						} else {
							$scope.all = true;
						}
					}
					//批量删除
				$scope.PLsc = function() {
						var a = 0;
						var b = 0;
						var arr = [];
						if (confirm("删除将不可逆！")) {
							for (d in $scope.data) {
								if ($scope.data[d].flag == true) {
									a++;
									if ($scope.data[d].v == "已发货") {
										arr.push($scope.data[d].name);
										//$scope.data.splice(d, 1);
									} else {
										b++;
									}
								}
							}
							if (a == 0) {
								alert("请选择要删除的数据！");
							} else {
								for (ar in arr) {
									for (d in $scope.data) {
										if (arr[ar] == $scope.data[d].name) {
											$scope.data.splice(d, 1);
										}
									}
								}
							}
							if (b != 0) {
								alert("未发货订单不可删除！");
							}
						}
					}
					//排序
				$scope.PXid = "-id";
				$scope.PXprice = "-price";
				$scope.PXdate = "-date";
				$scope.PXall = "";
				$scope.PX1 = function() {
					if ($scope.PXid == "-id") {
						$scope.PXid = "id";
						$scope.PXall = $scope.PXid;
					} else {
						$scope.PXid = "-id";
						$scope.PXall = $scope.PXid;
					}
				};
				$scope.PX2 = function() {
					if ($scope.PXprice == "-price") {
						$scope.PXprice = "price";
						$scope.PXall = $scope.PXprice;
					} else {
						$scope.PXprice = "-price";
						$scope.PXall = $scope.PXprice;
					}
				};
				$scope.PX3 = function() {
					if ($scope.PXdate == "-date") {
						$scope.PXdate = "date";
						$scope.PXall = $scope.PXdate;
					} else {
						$scope.PXdate = "-date";
						$scope.PXall = $scope.PXdate;
					}
				};
				//添加订单
				$scope.isShow1 = false;
				$scope.isShow2 = false;
				$scope.isShow3 = false;
				$scope.isShow4 = false;
				$scope.isShow5 = false;
				$scope.isShow0 = false;
				$scope.TJ = function() {
					$scope.color = "#000";
					if ($scope.isShow0 == false) {
						$scope.isShow0 = true;
					} else {
						$scope.isShow0 = false;
					}
				}
				$scope.spm = "";
				$scope.yhm = "";
				$scope.sjh = "";
				$scope.jg = "";
				$scope.cs = "--选择城市--";
				var a = 0;
				$scope.baocun = function() {
					$scope.tjflag = true;
					if ($scope.spm == "" || $scope.spm == null) {
						$scope.isShow1 = true;
						$scope.tjflag = false;
					}
					if ($scope.yhm == "" || $scope.yhm == null) {
						$scope.isShow2 = true;
						$scope.tjflag = false;
					}
					if ($scope.sjh == "" || $scope.sjh == null || isNaN($scope.sjh)) {
						$scope.isShow3 = true;
						$scope.tjflag = false;
					}
					if ($scope.jg == "" || $scope.jg == null || isNaN($scope.jg)) {
						$scope.isShow4 = true;
						$scope.tjflag = false;
					}
					if ($scope.cs == "--选择城市--") {
						$scope.isShow5 = true;
						$scope.tjflag = false;
					}
					if ($scope.tjflag == true) {
						a++;
						var b = new Date();
						var add = {
							flag: false,
							id: a,
							name: $scope.spm,
							user: $scope.yhm,
							tel: parseInt($scope.sjh),
							price: parseInt($scope.jg),
							city: $scope.cs,
							date: b,
							v: "未发货",
							c: "#FFFF31"
						};
						$scope.data.push(add);
						$scope.isShow1 = false;
						$scope.isShow2 = false;
						$scope.isShow3 = false;
						$scope.isShow4 = false;
						$scope.isShow5 = false;
						$scope.isShow0 = false;
						$scope.spm = "";
						$scope.yhm = "";
						$scope.sjh = "";
						$scope.jg = "";
						$scope.cs = "--选择城市--";
					} else {
						$scope.color = "#f00";
					}
				}
			})
		</script>
	</head>
	<!--HTML+CSS实现页面-->

	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<p>
				<button ng-click="TJ()">新增订单</button>
				<button ng-click="PLsc()">批量删除</button>
				<input type="text" placeholder="按商品名称查询" ng-model="CXname" ng-change="Cx()">
				<input type="text" placeholder="按手机号查询" ng-model="CXtel" ng-change="Cx()">
				<select ng-model="XLcd">
            <option value="">--按状态查询--</option>
            <option value="已发货">已发货</option>
            <option value="未发货">未发货</option>
        </select>
			</p>
			<table border="1" cellpadding="10" cellspacing="0" class="table">
				<thead>
					<tr style="background: #999999">
						<th><input type="checkbox" ng-model="all" ng-click="All()"></th>
						<th>id<input type="button" value="排序" ng-click="PX1()" ng-model="PXid"></th>
						<th>商品名</th>
						<th>用户名</th>
						<th>手机号</th>
						<th>价格<input type="button" value="排序" ng-click="PX2()" ng-model="PXprice"></th>
						<th>城市</th>
						<th>下单时间<input type="button" value="排序" ng-click="PX3()" ng-model="PXdate"></th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="d in data | filter:CX | orderBy:PXall" ng-show="isShow(d.v)">
						<th><input type="checkbox" ng-model="d.flag" ng-click="FX()"></th>
						<td>{{d.id}}</td>
						<td>{{d.name}}</td>
						<td>{{d.user}}</td>
						<td>{{d.tel}}</td>
						<td>{{d.price | currency:"￥:"}}</td>
						<td>{{d.city}}</td>
						<td>{{d.date | date:("yyyy-MM-dd hh:mm:ss")}}</td>
						<td><input type="button" style="background:{{d.c}}" value={{d.v}} ng-click="FH(d.id)"></td>
					</tr>
				</tbody>
			</table>
			<div style="width: 400px; border: 1px solid #f00; margin-top: 20px;" ng-show="isShow0">
				<h3>添加订单信息</h3>
				<ul style="list-style: none">
					<li>商品名:<input type="text" ng-model="spm" style="border-color:{{color}}"> <span class="span" ng-show="isShow1">商品名不能为空！</span></li><br>
					<li>用户名:<input type="text" ng-model="yhm" style="border-color:{{color}}"> <span class="span" ng-show="isShow2">用户名不能为空！</span></li><br>
					<li>手机号:<input type="text" ng-model="sjh" style="border-color:{{color}}"> <span class="span" ng-show="isShow3">手机号格式有误！</span></li><br>
					<li>价格为:<input type="text" ng-model="jg" style="border-color:{{color}}"> <span class="span" ng-show="isShow4">价格格式有误！</span></li><br>
					<li>城市:<select ng-model="cs" style="border-color:{{color}}"><option>--选择城市--</option><option>四川</option><option>河北</option></select> <span class="span" ng-show="isShow5">城市不能为空！</span></li>
				</ul>
				<button ng-click="baocun()">保存</button><br><br>
			</div>
		</center>
	</body>

</html>
sky的喵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap + AngularJS 实现简单的数据过滤----字符查找
汉南最後の読書人
07-27 799
代码： find.html 字符查找 body{ font-size: 12px; } ul{ list-style-type: none; width: 408px; margin:0px; padding: 0px; } ul li { float: left; padding:
angularJS添加表格，通过过滤器查找
w98326angle的博客
11-19 397
table{     margin-top: 20px;    }    .table1{     width: 600px;    }                var app = angular.module("myApp", []);   app.controller("myCtrl", function($scope) {    //定义数组    
JS,angularJS 实现栏目的添加和删除
热门推荐
余生|的博客
09-25 1万+
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> style> head> body> input type="text" id="name" onblur="yz()"> p>p> h2>h2> h3>h3> input type="radio" value="
angularjs的过滤器实现搜索与排序
freesky的专栏
09-19 7980
angularjs的过滤器实现搜索与排序 利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序. Document 姓名 年龄 {{arr1.name}} {{arr1.age}} // var wei = document.getElementById("wei"
AngularJS动态添加数据并删除
gyq04551的博客
02-17 7346
TodoList body { padding: 0; margin: 0; } .todo { width: 300px; margin: 100px auto; } .todo dd { overflow: hidden; } .todo input[type="checkbox"] { float: left; }
Angularjs过滤器实现动态搜索与排序功能示例
10-18
本文将详细探讨AngularJS过滤器实现动态搜索与排序功能的示例。过滤器是AngularJS中用于转换数据的指令，能够在不改变原始数据的情况下，转换数据的显示格式。在本文的示例中，过滤器用于根据用户输入动态筛选和排序...
Angularjs使用过滤器完成排序功能
10-19
AngularJS过滤器不仅可以用于排序，还可以用于数据的搜索和筛选。例如，结合“ng-model”和“ng-repeat”指令，可以实现一个数据搜索框，允许用户输入搜索关键词，然后通过“filter”过滤器来动态筛选显示的数据。 ...
AngularJS实现的自定义过滤器简单示例
10-17
在AngularJS中，过滤器是用于格式化数据的函数，可以被应用在各种场景中，如文本排序、货币格式化、日期处理等。过滤器可以被添加到控制器、服务或指令中，也可以被添加到HTML模板中的表达式内，从而对数据显示进行...
AngularJs 常用的过滤器
10-19
本文介绍了AngularJS中一些常用的过滤器。 一、date过滤器 date过滤器用于日期格式化。它可以根据指定的格式字符串来格式化日期值。例如，如果要将时间戳***格式化为日期字符串，可以使用以下代码： ```javascript...
AngularJS自定义过滤器用法经典实例总结
10-18
以下是对AngularJS自定义过滤器用法的详细说明，包括实例分析和实现技巧。 **过滤器结构** AngularJS中的过滤器通常应用于双括号表达式中，以管道（|）符号分隔。基本结构如下： ```html {{ 原始数据 | 过滤器名 ...
JavaScript实现表格过滤
不忘初心，方得始终
03-26 8028
用JavaScript实现表格过滤，设计一个Filterable Table。应用makeAllTablesFilterable之后，每个table附加一个输入域，用户输入字符之后，table中不包含这些字符的rows将消失，仅剩下含有相应字符的rows，并且相应字符会突出显示。 效果： js:
angular实现商品筛选功能（过滤器）
Sophie_U的博客
01-26 2268
一、demo功能分析1、通过service()创建数据并遍历渲染到页面 2、根据输入框的输入值进行字段查询 3、点击各列实现排序功能。二、实现1.1 数据定义与渲染angular更偏向于是一个MVVM模式的框架，所以它的controller很薄，里面的业务逻辑也是少的，因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中。此次demo通过angula
Angular学习---filter过滤器（管道pipe）
m0_61648855的博客
01-14 2666
angular核心概念 -----过滤器 Filter ---应用；如当后台传入数据用1,2 代表性别，可以用过滤器进行更改.如上 练习：创建员工信息列表 中 的员工性别 过滤器在angular2以后改名为 管道（pipe）,详见新建的sex.pipe.ts文件 创建管道对象的简便工具 ---- ng g pipe 管道名 扩展 -- angular 提供的 pipe 方法 --- （1）LowerCasePipe 把文本转换成全小写形式。 （2）UpperCasePipe 把文本转换成全大写形式 （
Angular过滤器
这是高级的博客
04-30 1624
过滤器（filter）作用就是接收一个参数，通过某个规则函数进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的json对象，对数组中的元素进行排序等。angular有内置的过滤器，如：currency(货币)、date(日期)、filter(子符串匹配)、json(格式化json对象)、limitTo(限制个数)、uppercase(大写)、lowercase(小写)、nu
angularjs过滤器filter
woflyoycm的博客
03-25 304
过滤器可以直接定义在全局使用 示例代码： //定义一个叫myFilter的过滤器 //input是被过滤的数组/对象等 module.filter('myFilter',function(){ return function(input,keyword){ return input.filter(x=>{ return x.isEnabled && x.Name.indexOf(keyword)>=0 }) } }) module.controller('MyC
angularJS实现动态添加,删除div
qq_34527715的博客
03-31 7929
要实现的功能类似下图，动态添加或者删除div 点击 增加可添加一条div  点击删除可删除一条div HTML代码如下：（省略CSS样式代码了） class="accordion-inner"> class="alert alert-info fade in" ng-repeat="permission in permissions">授权给: id="" c
angularJS-实现内容添加或移除
艾斯德斯的博客
09-14 1498
angularJS-实现内容添加或移除 *{padding: 0;margin: 0;} ol,ul{list-style: none;} body{background-color: #414246;} .box{width: 500px;height: 300px;border: 1px solid #000000;margin: 100px auto;ba
angularJs使用$watch和$filter过滤器制作搜索筛选实例
泠泠似水
05-31 2217
<div ng-app="module" ng-controller="ctrl"> 搜索: <input type="text" ng-model="search"> <table border="1" width="600"> <tr> <td>编号</td> <td>点击数</td> <td
Fragment切换和隐藏，显示（show，hide）
sky__cat的博客
11-05 2465
代码演示XML <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值