angularjs 增删改查点击按钮排序_js点击按钮改变按钮顺序-CSDN博客

本文链接：https://blog.csdn.net/chy521xin/article/details/79078030

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even){
background-color: pink;
}
tbody tr:nth-child(odd){
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/angularjs/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shangpin = [{
id:2001,
name:"iphoneX",
uname:"张三",
tel:13522222222,
price:8699,
chengshi:"北京",
udate:new Date("2017-11-23 10:00:00"),
zhuangtai:"已发货",
check:false
},{
id:3006,
name:"iphone6",
uname:"王红",
tel:18522222222,
price:5635,
chengshi:"郑州",
udate:new Date("2017-11-23 11:38:20"),
zhuangtai:"已发货",
check:false
},{
id:5312,
name:"iphone7",
uname:"赵小龙",
tel:17522222222,
price:6180,
chengshi:"北京",
udate:new Date("2017-11-20 09:17:30"),
zhuangtai:"未发货",
check:false
},{
id:2132,
name:"iphone8",
uname:"赵强",
tel:17622222222,
price:7190,
chengshi:"上海",
udate:new Date("2017-11-23 10:40:21"),
zhuangtai:"未发货",
check:false
}]
$scope.check = function(){
for(i in $scope.shangpin){
$scope.shangpin[i].check=$scope.checkall;
}
}
$scope.delete = function(){
for (var i = 0; i < $scope.shangpin.length; i++) {
if($scope.shangpin[i].check==true){
$scope.shangpin.splice(i,1)
i--;
}
}
}
$scope.add = function(){
$scope.isshow = !$scope.isshow;
}
$scope.even = function(){
var s = {
id:$scope.add_id,
name:$scope.add_name,
uname:$scope.add_uname,
tel:$scope.add_tel,
price:$scope.add_price,
chengshi:$scope.add_chengshi,
udate:$scope.add_udate,
zhuangtai:$scope.add_zhuangtai,
check:false
}
if($scope.add_id==""||$scope.add_id==null){
$scope.shows1=!$scope.shows1;
}else if($scope.add_name==""||$scope.add_name==null){
$scope.shows2=!$scope.shows2;
}else if($scope.add_uname==""||$scope.add_uname==null){
$scope.shows3=!$scope.shows3;
}else if($scope.add_tel==""||$scope.add_tel==null){
$scope.shows4=!$scope.shows4;
}else if($scope.add_price==""||$scope.add_price==null){
$scope.shows5=!$scope.shows5;
}else if($scope.add_chengshi==""||$scope.add_chengshi==null){
$scope.shows6=!$scope.shows6;
}else if($scope.add_udate==""||$scope.add_udate==null){
$scope.shows7=!$scope.shows7;
}else if($scope.add_zhuangtai==""||$scope.add_zhuangtai==null){
$scope.shows8=!$scope.shows8;
}else{
$scope.shangpin.push(s);
$scope.isshow=!$scope.isshow;
}

}
$scope.s="";
$scope.j="id";
$scope.orderBy1 = function(clumn){
$scope.j=clumn;
if($scope.s==""){
$scope.s="-";
}else{
$scope.s="";
}
}
$scope.orderBy2 = function(clumn){
$scope.j=clumn;
if($scope.s==""){
$scope.s="-";
}else{
$scope.s="";
}
}
$scope.orderBy3 = function(clumn){
$scope.j=clumn;
if($scope.s==""){
$scope.s="-";
}else{
$scope.s="";
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<button ng-click="add()">新增订单</button>
<button ng-click="delete()">批量删除</button>
<input type="text" placeholder="按商品名称查询" ng-model="search" />
<input type="text" placeholder="按手机号查询" ng-model="sj" />
<select ng-model="zt">
<option value="">--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1 solid" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkall" ng-click="check()" /></th>
<th>id<button ng-click="orderBy1('id')">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="orderBy2('price')">排序</button></th>
<th>城市</th>
<th>下单时间<button ng-click="orderBy3('udate')">排序</button></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in shangpin | filter:{name:search,tel:sj,zhuangtai:zt} | orderBy:(s+j)">
<td><input type="checkbox" ng-model="pro.check" ng-click="check1()" /></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{pro.uname}}</td>
<td>{{pro.tel}}</td>
<td>{{pro.price | currency:"￥"}}</td>
<td>{{pro.chengshi}}</td>
<td>{{pro.udate | date:"MM-dd hh:mm:ss"}}</td>
<td><button ng-click="pro.zhuangtai='已发货'">{{pro.zhuangtai}}</button></td>
</tr>
</tbody>
</table>
<div ng-show="isshow">
I　　D<input type="text" placeholder="请输入id" ng-model="add_id" /><span ng-show="shows1">id不能为空</span><br />
商品名<input type="text" placeholder="请输入商品名" ng-model="add_name" /><span ng-show="shows2">商品名不能为空</span><br />
用户名<input type="text" placeholder="请输入用户名" ng-model="add_uname" /><span ng-show="shows3">用户名不能为空</span><br />
手机号<input type="text" placeholder="请输入手机号" ng-model="add_tel" /><span ng-show="shows4">手机号不能为空</span><br />
价　格<input type="text" placeholder="请输入价格" ng-model="add_price" /><span ng-show="shows5">价格不能不空</span><br />
时　间<input type="date" placeholder="请输入时间" ng-model="add_udate" /><span ng-show="shows7">下单时间不能为空</span><br />
状　态<input type="text" placeholder="请输入状态" ng-model="add_zhuangtai" /><span ng-show="shows8">状态不能为空</span><br />
城　市<select ng-model="add_chengshi">
<option value="">--请选择--</option>
<option>上海</option>
<option>北京</option>
<option>沈阳</option>
</select>
<span ng-show="shows6">城市不能为空</span>
<button ng-click="even()">添加</button>
</div>
</center>
</body>
</html>