自制

V563626266

于 2018-03-28 20:06:00 发布

阅读量167

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/VS563626266/article/details/79733057

版权

代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(even){
background-color:darkseagreen;
}
tbody tr:nth-child(odd){
background-color: aqua;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
angular.module("app",[])
.controller("ctrl",function($scope,$http){
//获取网页数据
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(dates){
$scope.date = dates;
})
//全选反选
$scope.quanxuan = function(){
for(var i=0; i<$scope.date.length; i++){
$scope.date[i].ck = $scope.p;
}
}
//删除单行
$scope.shan = function(id){
for(var i=0; i<$scope.date.length;i++){
if($scope.date[i].id==id){
$scope.date.splice(i,1);
}
}
}
//批量删除
$scope.shanchu = function(){
if(confirm("确定吗")){
for(var i = 0; i<$scope.date.length;i++){
if($scope.date[i].ck){
$scope.date.splice(i,1);
i--;//防止隔行删除
}
}
}
}
//筛选
$scope.shaixuan = "";
$scope.shoujihao = "";
$scope.zhuangtai = "";

//排序
$scope.paixuorder = "id";

$scope.pai = true;
$scope.paixu = function(dianji){
console.log(dianji);
if(dianji == $scope.paixus){
$scope.pai = !$scope.pai;
}else{
$scope.pai = false;
}
$scope.paixuorder = dianji;
}

//修改
$scope.xiugai = function(tels){
var aa = prompt("请修改手机号",tels.tel);
if(aa!=undefined){
tels.tel = aa;
}
}

//添加
$scope.save = function(){
a = {
id:$scope.add_id,
gname:$scope.add_gname,
uname:$scope.add_uname,
tel:$scope.add_tel,
price:$scope.add_price,
city:$scope.add_city,
regdate:new Date(),
state:$scope.add_state
}
if($scope.add_id=="" || $scope.add_id==null){
$scope.show1=!$scope.show1;
}else if($scope.add_ganme=="" || $scope.add_gname==null){
$scope.show2=!$scope.show2;
}else if($scope.add_uname=="" || $scope.add_uname==null){
$scope.show3=!$scope.show3;
}else if($scope.add_tel=="" || $scope.add_tel==null){
$scope.show4=!$scope.show4;
}else if($scope.add_price=="" || $scope.add_price==null){
$scope.show5=!$scope.show5;
}else if($scope.add_city=="" || $scope.add_city==null){
$scope.show6=!$scope.show6;
}else if($scope.add_state=="" || $scope.add_state==null){
$scope.show7=!$scope.show7;
}else{
$scope.date.push(a);
$scope.fshow=false;
}
}

})
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<button ng-click="fshow=true">新增订单</button>
<button ng-click="shanchu()">批量删除</button>
<input type="text" placeholder="商品名搜索" ng-model="shaixuan" />
<input type="text" placeholder="手机号搜索" ng-model="shoujihao" />
<select ng-model="zhuangtai">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="p" ng-click="quanxuan()"></td>
<td>编号<button ng-model="pai" ng-click="paixu('id')">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-model="pai" ng-click="paixu('price')">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-model="pai" ng-click="paixu('regdate')">排序</button></td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in date | filter:{gname:shaixuan} | filter:{tel:shoujihao} | filter:{state:zhuangtai} | orderBy:paixuorder:(pai)">
<td><input type="checkbox" ng-model="d.ck"></td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>{{d.price}}</td>
<td>{{d.city}}</td>
<td>{{d.regdate | date:'MM-dd hh:mm'}}</td>
<td>
<span ng-if="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">{{d.state}}</a>
</span>
<span ng-if="d.state=='已发货'">
已发货
</span>
</td>
<td>
<button ng-click="xiugai(d)">修改</button>
<button ng-click="shan(d.id)">删除</button>
</td>
</tr>
</table>
<form ng-show="fshow" id="container">
<h>添加商品</h3><br />
<input ng-model="add_id" placeholder="请输入id" />
<span ng-show="show1">
id不能为空
</span>
<br />
<input ng-model="add_gname" placeholder="请输入商品名" />
<span ng-show="show2">
商品名不能为空
</span>
<br />
<input ng-model="add_uname" placeholder="请输入用户名" />
<span ng-show="show3">
用户名不能为空
</span>
<br />
<input ng-model="add_tel" placeholder="请输入电话" type="tel" />
<span ng-show="show4">
电话不能为空
</span>
<br />
<input ng-model="add_price" placeholder="请输入价格" type="number" />
<span ng-show="show5">
价格不能为空
</span>
<br />
<select ng-model="add_city">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
</select>
<span ng-show="show6">
城市不能为空
</span>
<br />
<input type="date" />
<span ng-show="show7">
时间不能为空
</span>
<br />
<select ng-model="add_state">
<option value="">选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select>
<span ng-show="show8">
状态不能为空
</span>
<br />
<button ng-click="save()">保存</button>
</form>
</body>
</html>