AngularJS排序+模糊查询+批量删除+添加列表
来源：互联网 发布：c语言死循环 编辑：程序博客网 时间：2024/05/16 00:38
<!DOCTYPE html>
<html>
<!--/*
* 需求分析
* 先定义数组 将数组信息利用ng-repeat遍历存进表格中
* 实现过滤功能 利用filter过滤器进行信息的过滤 包括姓名和手机号以及发货状态进行过滤
* 排序 利用orderBy 点击按钮时排序的方式改变
* 发货与已发货状态变化 利用隐藏和显示
* 添加信息时 使用验证 如果成功 则存进表格 不正确则存不进去
*
* */-->
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bt1{
background-color: deepskyblue;
}
td{
border: 1px solid black;
}
.true{
background: greenyellow;
border: 0px;
border-radius: 3px;
}
.false{
background: yellow;
border: 0px;
border-radius: 3px;
}
thead tr{
background-color: #999;
}
tbody tr:nth-child(2n){
background-color: #eee;
}
tbody tr:hover{
background-color: deepskyblue;
}
tfoot tr td{
border: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("mycont",["$scope","$filter",function($scope,$filter){
$scope.good=[{
xuan: false,
id: 1,
sname: '小米3',
yname: '张三',
num: '13211111111',
price: 8999,
city: '北京',
ss: '11230852',
zt: false
},
{
xuan: false,
id: 2,
sname: '小米4',
yname: '李四',
num: '13222222222',
price: 4999,
city: '上海',
ss: '11210852',
zt: false
},
{
xuan: false,
id: 3,
sname: '小米5',
yname: '王五',
num: '13233333333',
price: 6999,
city: '北京',
ss: '11230452',
zt: false
},
{
xuan: false,
id: 4,
sname: '红米Note2',
yname: '赵六',
num: '13244444444',
price: 2999,
city: '上海',
ss: '11210552',
zt: false
},
{
xuan: false,
id: 5,
sname: '红米Note4',
yname: '刘七',
num: '13255555555',
price: 1999,
city: '北京',
ss: '11230752',
zt: false}];
$scope.goods=$scope.good;
//使用AngularJS过滤器实现搜索功能。
//在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息；
// 在输入框中输入用户手机号即可根据用户手机
// 动态查询出符合要求的信息。
$scope.chazt=function(cha3){
$scope.goods=$scope.good;
var xun=[];
if ($scope.cha3=="已发货") {
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].zt){
xun.push($scope.goods[i]);
}
}
} else{
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].zt==false){
xun.push($scope.goods[i]);
}
}
}
$scope.goods=xun;
}
//用户点击下拉菜单选择”已发货”则查询出已发货的所有订单
$scope.fahuo=function($index){
$scope.goods[$index].zt=true;
}
// 实现订单批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单
$scope.piliang=function(){
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].zt==true&&$scope.goods[i].xuan==true){
// alert("asdfvbn");
$scope.goods.splice(i,1);
i--;
}
}
}
// 订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列。
//根据ID排序
var idp=true;
$scope.pai1=function(){
if (idp) {
$scope.goods.sort(function(a,b){
return a.id-b.id;
})
} else{
$scope.goods.sort(function(a,b){
return b.id-a.id;
})
}
idp=!idp;
}
//根据价格排序
var price_p=true;
$scope.pai2=function(){
if (price_p) {
$scope.goods.sort(function(a,b){
return a.price-b.price;
})
} else{
$scope.goods.sort(function(a,b){
return b.price-a.price;
})
}
price_p=!price_p;
}
//根据时间排序
var ss_p=true;
$scope.pai3=function(){
if (ss_p) {
$scope.goods.sort(function(a,b){
return a.ss-b.ss;
})
} else{
$scope.goods.sort(function(a,b){
return b.ss-a.ss;
})
}
ss_p=!ss_p;
}
//添加
$scope.add=function(){
$scope.bb=true;
$(".t1").hide();
$(".tt1").blur(function(){
if ($scope.ssn==null||$scope.ssn=="") {
$(".t1").show();
$(".tt1").css("border","1px solid red");
} else{
$(".t1").hide();
$(".tt1").css("border","1px solid #000");
}
})
$scope.tijia=function(){
$scope.bb=false;
}
}
}])
// 用户可以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货
app.filter("myfahuo",function(){
return function(button){
if (button) {
return "已发货"
} else{
return "未发货"
}
return button;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<button class="bt1" ng-click="add()">新增订单</button>
<button class="bt1" ng-click="piliang()">批量删除</button>
<input type="text" ng-model="cha1" placeholder="按商品名查询" style="margin-left: 100px;"/>
<input type="text" ng-model="cha2" placeholder="按手机号查询" />
<select style="margin-left: 100px;" ng-change="chazt(cha3)" ng-model="cha3" ng-init="cha3='-按状态查询-'">
<option>-按状态查询-</option>
<option>已发货</option>
<option>未发货</option>
</select><br />
<table width="800px" cellpadding="0px" cellspacing="0px" border="1px">
<thead>
<tr>
<td><input type="checkbox"/></td>
<td>id<button class="bt1" ng-click="pai1()">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button class="bt1" ng-click="pai2()">排序</button></td>
<td>城市</td>
<td>下单时间<button class="bt1" ng-click="pai3()">排序</button></td>
<td>状态</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods | filter:{sname:cha1,num:cha2}">
<td><input type="checkbox" ng-model="g.xuan" /></td>
<td>{{g.id}}</td>
<td>{{g.sname}}</td>
<td>{{g.yname}}</td>
<td>{{g.num}}</td>
<td>{{g.price|currency:'￥'}}</td>
<td>{{g.city}}</td>
<td>{{g.ss| date:'MM-dd hh:mm:ss'}}</td>
<td><button class="{{g.zt}}" ng-click="fahuo($index)">{{g.zt|myfahuo}}</button></td>
</tr>
</tbody>
</table>
<table ng-show="bb">
<tfoot>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="ssn" class="tt1"/></td>
<td class="t1" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="yyn" /></td>
<td ng-show="t2" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="sss" /></td>
<td ng-show="t3" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" ng-model="pp" /></td>
<td ng-show="t4" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>城市</td>
<td><select ng-model="cc" />
<option>北京</option>
<option>上海</option>
</select></td>
<td ng-show="t5" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td colspan=""><input type="button" value="提交" ng-click="tijia(bb)" /></td>
</tr>
</tfoot>
</table>
</body>
</html>
<html>
<!--/*
* 需求分析
* 先定义数组 将数组信息利用ng-repeat遍历存进表格中
* 实现过滤功能 利用filter过滤器进行信息的过滤 包括姓名和手机号以及发货状态进行过滤
* 排序 利用orderBy 点击按钮时排序的方式改变
* 发货与已发货状态变化 利用隐藏和显示
* 添加信息时 使用验证 如果成功 则存进表格 不正确则存不进去
*
* */-->
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bt1{
background-color: deepskyblue;
}
td{
border: 1px solid black;
}
.true{
background: greenyellow;
border: 0px;
border-radius: 3px;
}
.false{
background: yellow;
border: 0px;
border-radius: 3px;
}
thead tr{
background-color: #999;
}
tbody tr:nth-child(2n){
background-color: #eee;
}
tbody tr:hover{
background-color: deepskyblue;
}
tfoot tr td{
border: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("mycont",["$scope","$filter",function($scope,$filter){
$scope.good=[{
xuan: false,
id: 1,
sname: '小米3',
yname: '张三',
num: '13211111111',
price: 8999,
city: '北京',
ss: '11230852',
zt: false
},
{
xuan: false,
id: 2,
sname: '小米4',
yname: '李四',
num: '13222222222',
price: 4999,
city: '上海',
ss: '11210852',
zt: false
},
{
xuan: false,
id: 3,
sname: '小米5',
yname: '王五',
num: '13233333333',
price: 6999,
city: '北京',
ss: '11230452',
zt: false
},
{
xuan: false,
id: 4,
sname: '红米Note2',
yname: '赵六',
num: '13244444444',
price: 2999,
city: '上海',
ss: '11210552',
zt: false
},
{
xuan: false,
id: 5,
sname: '红米Note4',
yname: '刘七',
num: '13255555555',
price: 1999,
city: '北京',
ss: '11230752',
zt: false}];
$scope.goods=$scope.good;
//使用AngularJS过滤器实现搜索功能。
//在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息；
// 在输入框中输入用户手机号即可根据用户手机
// 动态查询出符合要求的信息。
$scope.chazt=function(cha3){
$scope.goods=$scope.good;
var xun=[];
if ($scope.cha3=="已发货") {
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].zt){
xun.push($scope.goods[i]);
}
}
} else{
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].zt==false){
xun.push($scope.goods[i]);
}
}
}
$scope.goods=xun;
}
//用户点击下拉菜单选择”已发货”则查询出已发货的所有订单
$scope.fahuo=function($index){
$scope.goods[$index].zt=true;
}
// 实现订单批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单
$scope.piliang=function(){
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].zt==true&&$scope.goods[i].xuan==true){
// alert("asdfvbn");
$scope.goods.splice(i,1);
i--;
}
}
}
// 订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列。
//根据ID排序
var idp=true;
$scope.pai1=function(){
if (idp) {
$scope.goods.sort(function(a,b){
return a.id-b.id;
})
} else{
$scope.goods.sort(function(a,b){
return b.id-a.id;
})
}
idp=!idp;
}
//根据价格排序
var price_p=true;
$scope.pai2=function(){
if (price_p) {
$scope.goods.sort(function(a,b){
return a.price-b.price;
})
} else{
$scope.goods.sort(function(a,b){
return b.price-a.price;
})
}
price_p=!price_p;
}
//根据时间排序
var ss_p=true;
$scope.pai3=function(){
if (ss_p) {
$scope.goods.sort(function(a,b){
return a.ss-b.ss;
})
} else{
$scope.goods.sort(function(a,b){
return b.ss-a.ss;
})
}
ss_p=!ss_p;
}
//添加
$scope.add=function(){
$scope.bb=true;
$(".t1").hide();
$(".tt1").blur(function(){
if ($scope.ssn==null||$scope.ssn=="") {
$(".t1").show();
$(".tt1").css("border","1px solid red");
} else{
$(".t1").hide();
$(".tt1").css("border","1px solid #000");
}
})
$scope.tijia=function(){
$scope.bb=false;
}
}
}])
// 用户可以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货
app.filter("myfahuo",function(){
return function(button){
if (button) {
return "已发货"
} else{
return "未发货"
}
return button;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<button class="bt1" ng-click="add()">新增订单</button>
<button class="bt1" ng-click="piliang()">批量删除</button>
<input type="text" ng-model="cha1" placeholder="按商品名查询" style="margin-left: 100px;"/>
<input type="text" ng-model="cha2" placeholder="按手机号查询" />
<select style="margin-left: 100px;" ng-change="chazt(cha3)" ng-model="cha3" ng-init="cha3='-按状态查询-'">
<option>-按状态查询-</option>
<option>已发货</option>
<option>未发货</option>
</select><br />
<table width="800px" cellpadding="0px" cellspacing="0px" border="1px">
<thead>
<tr>
<td><input type="checkbox"/></td>
<td>id<button class="bt1" ng-click="pai1()">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button class="bt1" ng-click="pai2()">排序</button></td>
<td>城市</td>
<td>下单时间<button class="bt1" ng-click="pai3()">排序</button></td>
<td>状态</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods | filter:{sname:cha1,num:cha2}">
<td><input type="checkbox" ng-model="g.xuan" /></td>
<td>{{g.id}}</td>
<td>{{g.sname}}</td>
<td>{{g.yname}}</td>
<td>{{g.num}}</td>
<td>{{g.price|currency:'￥'}}</td>
<td>{{g.city}}</td>
<td>{{g.ss| date:'MM-dd hh:mm:ss'}}</td>
<td><button class="{{g.zt}}" ng-click="fahuo($index)">{{g.zt|myfahuo}}</button></td>
</tr>
</tbody>
</table>
<table ng-show="bb">
<tfoot>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="ssn" class="tt1"/></td>
<td class="t1" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="yyn" /></td>
<td ng-show="t2" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="sss" /></td>
<td ng-show="t3" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" ng-model="pp" /></td>
<td ng-show="t4" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td>城市</td>
<td><select ng-model="cc" />
<option>北京</option>
<option>上海</option>
</select></td>
<td ng-show="t5" style="color: red;">输入框不得为空</td>
</tr>
<tr>
<td colspan=""><input type="button" value="提交" ng-click="tijia(bb)" /></td>
</tr>
</tfoot>
</table>
</body>
</html>
阅读全文
0 0
- AngularJS排序+模糊查询+批量删除+添加列表
- 模糊查询，批量删除， 添加用户，隔行变色，排序，过滤器
- AngularJS添加删除查询排序
- 隔行换色+删除+批量删除+排序+模糊查询+修改+添加
- 商品订单：数据的判断、添加，批量删除，排序，模糊查询
- AngularJS查询.排序.表头排序.全选.删除.批量删除
- 购物车angularJS删除和模糊查询还有排序
- angularjs 单列排序+模糊查询
- angularjs的模糊查询，排序
- AngularJS查询，删除，添加
- angularJs添加，删除，查询
- angularjs 删除 查询 添加
- angularJs 删除 查询 排序
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- angularjs添加排序查询
- angularjs排序、查询、添加
- AngularJs实现订单列表的增加删除查询排序
- 隔行换色+模糊查询+添加+删除+排序
- Groovy语言学习：groovy语言简介及基本语法
- 美国2012年总统候选人政治献金数据分析
- JSON(高程笔记)
- PowerDesigner最基础的使用方法入门学习
- spring+quartz实现动态任务调度
- AngularJS排序+模糊查询+批量删除+添加列表
- Android_多分割界面看实时画面的方法
- Oracle中substr函数和instr函数的结合使用
- angular增，删，改，查
- 718. Maximum Length of Repeated Subarray
- Linux vi命令大全
- 122. Best Time to Buy and Sell Stock II
- node.js详解Http服务器
- matlab之作图设置游标的精度
