angular js 查询 按钮排序 状态查询
来源：互联网 发布：接口平台 java 编辑：程序博客网 时间：2024/06/06 00:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 600px;
text-align: center;
}
#d01{
width: 400px;
height: 500px;
background: #cfcfcf;
text-align: center;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
angular.module("yanzhe",[]).controller("demo",function($scope){
$scope.goods=[
{state:false,id:2001,name:"iPhoneX",user:"张三",phone:13525565588,price:8699,city:"北京",downtime:"11-23 10:00:00",zt:"已发货"},
{state:false,id:3006,name:"iPhone6",user:"王红",phone:18524565588,price:5635,city:"郑州",downtime:"11-23 11:38:20",zt:"已发货"},
{state:false,id:5321,name:"iPhone7",user:"赵小龙",phone:17545585598,price:6180,city:"北京",downtime:"11-20 09:17:30",zt:"未发货"},
{state:false,id:2001,name:"iPhone8",user:"赵强",phone:17625565618,price:7190,city:"上海",downtime:"11-23 10:40:21",zt:"未发货"}
];
$scope.add = function(){
var id = $scope.newid;
var name = $scope.newname;
var user = $scope.newuser;
var phone = $scope.newphone;
var price = $scope.newprice;
var city = $scope.newcity;
$scope.b = false;
$scope.s = false;
$scope.y = false;
$scope.sj = false;
$scope.j = false;
if($scope.newid==""||$scope.newid==undefined){
$("#bianhao").text("编号不能为空");
$scope.b = true;
}
if($scope.newname == ""||$scope.newname==undefined){
$("#shangpin").text("商品名不能为空");
$scope.s = true;
}
if($scope.newuser==""||$scope.newuser==undefined){
$("#yonghuming").text("用户名号不能为空");
$scope.y = true;
}
if($scope.newphone==""||$scope.newphone==undefined){
$("#shoujihao").text("手机号不能为空");
$scope.sj = true;
}
if($scope.newprice==""||$scope.newprice==undefined){
$("#jiage").text("价格不能为空");
$scope.j= true;
}
if(!$scope.b&&!$scope.s&&!$scope.y&&!$scope.sj&&!$scope.j){
$scope.goods.push({id:id,name:name,user:user,phone:phone,price:price,city:city,downtime:new Date(),zt:"未发货"})
}
}
//全选
$scope.ckAll=function(){
for(var i in $scope.goods){
$scope.goods[i].state=$scope.ckall;
}
}
//批量删除 已发货
$scope.del = function(){
for(var i = 0;i<$scope.goods.length;i++){
if($scope.goods[i].zt == "已发货"&& $scope.goods[i].state==true){
$scope.goods.splice(i,1);
i--;
}
}
}
//发货变色
$scope.zz = function(id){
for(var i =0;i<$scope.goods.length;i++){
if(id==$scope.goods[i].id){
$scope.goods[i].zt="已发货";
}
}
}
//id排序
$scope.kong = "";
$scope.px = false;
$scope.idpx = function(){
$scope.kong = "id";
$scope.px = !$scope.px;
}
//价格排序
// $scope.j = "";
// $scope.p = false;
$scope.jgpx = function(){
$scope.kong = "price";
$scope.px = !$scope.px;
}
//时间排序
// $scope.sj = "";
// $scope.pp = false;
$scope.sjpx = function(){
$scope.kong = "downtime";
$scope.px = !$scope.px;
}
});
</script>
</head>
<body ng-app="yanzhe" ng-controller="demo">
<button ng-click="toadd=true">新增订单</button>
<button ng-click="del()">批量删除</button>
<input placeholder="按商品名称查询..." ng-model="spcx"/>
<input placeholder="按手机号查询..." ng-model="sjcx"/>
<select ng-model="ztcx">
<option value="">--按状态查询--</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="checkbox" ng-model="ckall" ng-click="ckAll()"/>
</td>
<td>
id<button ng-click="idpx()" >排序</button>
</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>
价格<button ng-click="jgpx()">排序</button>
</td>
<td>城市</td>
<td>
下单时间<button ng-click="sjpx()">排序</button>
</td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods|filter:{name:spcx}|filter:{phone:sjcx}|filter:{zt:ztcx}|orderBy:kong:px">
<td>
<input type="checkbox" ng-model="g.state"/>
</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.user}}</td>
<td>{{g.phone}}</td>
<td>{{g.price|currency:"¥"}}</td>
<td>{{g.city}}</td>
<td>{{g.downtime|date:"MM-dd HH:mm:ss"}}</td>
<td>
<span ng-show="g.zt=='已发货'" style="background: greenyellow;">已发货</span>
<span ng-show="g.zt=='未发货'" ng-click="zz(g.id)" style="background: red;">未发货</span>
</td>
</tr>
</table>
<div id="d01" ng-show="toadd">
ID编号:<input ng-model="newid" /><span id="bianhao" ng-show="b"></span><br />
商品名:<input ng-model="newname"/><span id="shangpin" ng-show="s"></span><br />
用户名:<input ng-model="newuser"/><span id="yonghuming" ng-show="y"></span><br />
手机号:<input ng-model="newphone"/><span id="shoujihao" ng-show="sj"></span><br />
价格为:<input ng-model="newprice"/><span id="jiage" ng-show="j"></span><br />
城市:<select ng-model="newcity">
<option value="">--选择城市--</option>
<option value="北京">北京</option>
<option value="郑州">郑州</option>
<option value="上海">上海</option>
</select><br />
<button ng-click="add()">保存</button>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 600px;
text-align: center;
}
#d01{
width: 400px;
height: 500px;
background: #cfcfcf;
text-align: center;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
angular.module("yanzhe",[]).controller("demo",function($scope){
$scope.goods=[
{state:false,id:2001,name:"iPhoneX",user:"张三",phone:13525565588,price:8699,city:"北京",downtime:"11-23 10:00:00",zt:"已发货"},
{state:false,id:3006,name:"iPhone6",user:"王红",phone:18524565588,price:5635,city:"郑州",downtime:"11-23 11:38:20",zt:"已发货"},
{state:false,id:5321,name:"iPhone7",user:"赵小龙",phone:17545585598,price:6180,city:"北京",downtime:"11-20 09:17:30",zt:"未发货"},
{state:false,id:2001,name:"iPhone8",user:"赵强",phone:17625565618,price:7190,city:"上海",downtime:"11-23 10:40:21",zt:"未发货"}
];
$scope.add = function(){
var id = $scope.newid;
var name = $scope.newname;
var user = $scope.newuser;
var phone = $scope.newphone;
var price = $scope.newprice;
var city = $scope.newcity;
$scope.b = false;
$scope.s = false;
$scope.y = false;
$scope.sj = false;
$scope.j = false;
if($scope.newid==""||$scope.newid==undefined){
$("#bianhao").text("编号不能为空");
$scope.b = true;
}
if($scope.newname == ""||$scope.newname==undefined){
$("#shangpin").text("商品名不能为空");
$scope.s = true;
}
if($scope.newuser==""||$scope.newuser==undefined){
$("#yonghuming").text("用户名号不能为空");
$scope.y = true;
}
if($scope.newphone==""||$scope.newphone==undefined){
$("#shoujihao").text("手机号不能为空");
$scope.sj = true;
}
if($scope.newprice==""||$scope.newprice==undefined){
$("#jiage").text("价格不能为空");
$scope.j= true;
}
if(!$scope.b&&!$scope.s&&!$scope.y&&!$scope.sj&&!$scope.j){
$scope.goods.push({id:id,name:name,user:user,phone:phone,price:price,city:city,downtime:new Date(),zt:"未发货"})
}
}
//全选
$scope.ckAll=function(){
for(var i in $scope.goods){
$scope.goods[i].state=$scope.ckall;
}
}
//批量删除 已发货
$scope.del = function(){
for(var i = 0;i<$scope.goods.length;i++){
if($scope.goods[i].zt == "已发货"&& $scope.goods[i].state==true){
$scope.goods.splice(i,1);
i--;
}
}
}
//发货变色
$scope.zz = function(id){
for(var i =0;i<$scope.goods.length;i++){
if(id==$scope.goods[i].id){
$scope.goods[i].zt="已发货";
}
}
}
//id排序
$scope.kong = "";
$scope.px = false;
$scope.idpx = function(){
$scope.kong = "id";
$scope.px = !$scope.px;
}
//价格排序
// $scope.j = "";
// $scope.p = false;
$scope.jgpx = function(){
$scope.kong = "price";
$scope.px = !$scope.px;
}
//时间排序
// $scope.sj = "";
// $scope.pp = false;
$scope.sjpx = function(){
$scope.kong = "downtime";
$scope.px = !$scope.px;
}
});
</script>
</head>
<body ng-app="yanzhe" ng-controller="demo">
<button ng-click="toadd=true">新增订单</button>
<button ng-click="del()">批量删除</button>
<input placeholder="按商品名称查询..." ng-model="spcx"/>
<input placeholder="按手机号查询..." ng-model="sjcx"/>
<select ng-model="ztcx">
<option value="">--按状态查询--</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="checkbox" ng-model="ckall" ng-click="ckAll()"/>
</td>
<td>
id<button ng-click="idpx()" >排序</button>
</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>
价格<button ng-click="jgpx()">排序</button>
</td>
<td>城市</td>
<td>
下单时间<button ng-click="sjpx()">排序</button>
</td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods|filter:{name:spcx}|filter:{phone:sjcx}|filter:{zt:ztcx}|orderBy:kong:px">
<td>
<input type="checkbox" ng-model="g.state"/>
</td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.user}}</td>
<td>{{g.phone}}</td>
<td>{{g.price|currency:"¥"}}</td>
<td>{{g.city}}</td>
<td>{{g.downtime|date:"MM-dd HH:mm:ss"}}</td>
<td>
<span ng-show="g.zt=='已发货'" style="background: greenyellow;">已发货</span>
<span ng-show="g.zt=='未发货'" ng-click="zz(g.id)" style="background: red;">未发货</span>
</td>
</tr>
</table>
<div id="d01" ng-show="toadd">
ID编号:<input ng-model="newid" /><span id="bianhao" ng-show="b"></span><br />
商品名:<input ng-model="newname"/><span id="shangpin" ng-show="s"></span><br />
用户名:<input ng-model="newuser"/><span id="yonghuming" ng-show="y"></span><br />
手机号:<input ng-model="newphone"/><span id="shoujihao" ng-show="sj"></span><br />
价格为:<input ng-model="newprice"/><span id="jiage" ng-show="j"></span><br />
城市:<select ng-model="newcity">
<option value="">--选择城市--</option>
<option value="北京">北京</option>
<option value="郑州">郑州</option>
<option value="上海">上海</option>
</select><br />
<button ng-click="add()">保存</button>
</div>
</body>
</html>
阅读全文
0 0
- angular js 查询 按钮排序 状态查询
- angular js 添加 排序 查询
- angular js查询 排序 添加 删除
- angular.js查询天气
- angular表格排序（查询）
- angular的查询添加排序
- angular实现排序,添加,查询
- Angular,添加,删除,查询,排序
- angular js 查询 + 表单+日程
- Angular JS 添加、删除、查询
- angular根据按钮点击事件模糊查询
- angular查询
- Angular内置过滤器+orderBy排序+模糊查询
- angular+自定义模糊查询+排序+三角
- Angular模糊查询和排序已经添加
- angular删除数据+模糊查询,排序
- angular表格的查询添加和排序
- angular（查询、删除、添加、排序）案例
- ARM汇编编程的建议规则 AAPCS
- 机器学习之支持向量机SVM Support Vector Machine (四) SMO算法
- Oracle 如何修改表中字段顺序？
- cocos2dx安卓编译出错
- Xlistview上拉加载，下拉刷新、多条目展示以及获取系统时间
- angular js 查询 按钮排序 状态查询
- 监控系统之深度解析
- 购物车到订单的MVP方法
- rgba和opacity的区别及应用
- cocos2d-x ScrollView的滑动区调整
- 用我们最好的博客方式培养读者
- 查找算法-顺序查找(顺序表的普通实现和优化实现)
- 获取字符串中每一个字母出现的次数
- 订单列表页
