<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
//代入数据
var app = angular.module("app",[]);
app.controller("con1",function($scope,$http){
var id =1;
$scope.isshow = false;
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").success(function(aa){
$scope.dates=aa;
})
//正反选
$scope.zf=function(){
for(var i=0;i<$scope.dates.length;i++){
$scope.dates[i].c=$scope.ck;
}
}
//批量删除
$scope.delall=function(){
for(var i=0;i<$scope.dates.length;i++){
if ($scope.dates[i].c) {
$scope.dates.splice(i,1);
i--;
}
}
}
$scope.del=function(gname){
for(var i in $scope.dates){
if ($scope.dates[i].gname ==gname) {
$scope.dates.splice(i,1);
}
}
}
$scope.save=function(){
if ($scope.add_gname==null || $scope.add_gname=="") {
alert("商品名名不能为空");
return;
}
if($scope.add_uname==""||$scope.add_uname==null) {
alert("用户名名不能为空");
return;
}
if($scope.add_tel==""||$scope.add_tel==null) {
alert("电话号不能为空");
return;
}
if($scope.add_price==""||$scope.add_price==null) {
alert("价格不能为空");
return;
}
if($scope.add_city==""||$scope.add_city==null) {
alert("城市不能为空");
return;
}
var aa = {
id:id++,
c:false,
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.dates.push(aa);
$scope.isshow=false;
}
})
</script>
<style>
tr:nth-child(2n+1){
background: deepskyblue;
}
tr:nth-child(2n){
background: crimson;
}
</style>
</head>
<body ng-app="app" ng-controller="con1">
<button ng-click="isshow=true">新增用户</button>
<button ng-click="delall()">批量删除</button>
<input placeholder="请输入用户名" ng-model="sname"/>
<input placeholder="请输入电话号码" ng-model="stel" />
<select ng-model="ss">
<option value="">请选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1">
<tr style="background: yellow;">
<th><input type="checkbox" ng-click="zf()" ng-model="ck"></th>
<th>id<button ng-click="px='id';f=!f">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="px=price;f=!f">排序</button></th>
<th>城市</th>
<th>下单时间<button ng-click="px=regdate;f=!f">排序</button></th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="d in dates|orderBy:px:f|filter:{gname:sname,tel:stel,state:ss}">
<td><input type="checkbox" ng-model="d.c"></td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td><span ng-hide="xg">{{d.price|currency:'¥:'}}</span><span ng-show="xg"><input type="text" ng-show="xg" ng-model="d.price"><button ng-click="xg=false">保存</button></span></td>
<td>{{d.city}}</td>
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: green;" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a></span>
<span style="background: yellow;" ng-show="d.state=='已发货'">已发货</span>
</td>
<td><button ng-click="del(d.gname)">删除</button>
<button ng-click="xg=true">修改</button>
</td>
</tr>
</table>
<div ng-show="isshow" >
商品名<input placeholder="请输入商品名" ng-model="add_gname"/><br />
用户名<input placeholder="请输入用户名" ng-model="add_uname" /><br />
手机号<input placeholder="请输入手机号" ng-model="add_tel" /><br />
价格为<input placeholder="请输入价格" ng-model="add_price" /><br />
城市<select ng-model="add_city">
<option value="">--选择城市--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select><br />
<button ng-click="save()">保存</button>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
//代入数据
var app = angular.module("app",[]);
app.controller("con1",function($scope,$http){
var id =1;
$scope.isshow = false;
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").success(function(aa){
$scope.dates=aa;
})
//正反选
$scope.zf=function(){
for(var i=0;i<$scope.dates.length;i++){
$scope.dates[i].c=$scope.ck;
}
}
//批量删除
$scope.delall=function(){
for(var i=0;i<$scope.dates.length;i++){
if ($scope.dates[i].c) {
$scope.dates.splice(i,1);
i--;
}
}
}
$scope.del=function(gname){
for(var i in $scope.dates){
if ($scope.dates[i].gname ==gname) {
$scope.dates.splice(i,1);
}
}
}
$scope.save=function(){
if ($scope.add_gname==null || $scope.add_gname=="") {
alert("商品名名不能为空");
return;
}
if($scope.add_uname==""||$scope.add_uname==null) {
alert("用户名名不能为空");
return;
}
if($scope.add_tel==""||$scope.add_tel==null) {
alert("电话号不能为空");
return;
}
if($scope.add_price==""||$scope.add_price==null) {
alert("价格不能为空");
return;
}
if($scope.add_city==""||$scope.add_city==null) {
alert("城市不能为空");
return;
}
var aa = {
id:id++,
c:false,
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.dates.push(aa);
$scope.isshow=false;
}
})
</script>
<style>
tr:nth-child(2n+1){
background: deepskyblue;
}
tr:nth-child(2n){
background: crimson;
}
</style>
</head>
<body ng-app="app" ng-controller="con1">
<button ng-click="isshow=true">新增用户</button>
<button ng-click="delall()">批量删除</button>
<input placeholder="请输入用户名" ng-model="sname"/>
<input placeholder="请输入电话号码" ng-model="stel" />
<select ng-model="ss">
<option value="">请选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<table border="1">
<tr style="background: yellow;">
<th><input type="checkbox" ng-click="zf()" ng-model="ck"></th>
<th>id<button ng-click="px='id';f=!f">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="px=price;f=!f">排序</button></th>
<th>城市</th>
<th>下单时间<button ng-click="px=regdate;f=!f">排序</button></th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="d in dates|orderBy:px:f|filter:{gname:sname,tel:stel,state:ss}">
<td><input type="checkbox" ng-model="d.c"></td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td><span ng-hide="xg">{{d.price|currency:'¥:'}}</span><span ng-show="xg"><input type="text" ng-show="xg" ng-model="d.price"><button ng-click="xg=false">保存</button></span></td>
<td>{{d.city}}</td>
<td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: green;" ng-show="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">未发货</a></span>
<span style="background: yellow;" ng-show="d.state=='已发货'">已发货</span>
</td>
<td><button ng-click="del(d.gname)">删除</button>
<button ng-click="xg=true">修改</button>
</td>
</tr>
</table>
<div ng-show="isshow" >
商品名<input placeholder="请输入商品名" ng-model="add_gname"/><br />
用户名<input placeholder="请输入用户名" ng-model="add_uname" /><br />
手机号<input placeholder="请输入手机号" ng-model="add_tel" /><br />
价格为<input placeholder="请输入价格" ng-model="add_price" /><br />
城市<select ng-model="add_city">
<option value="">--选择城市--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select><br />
<button ng-click="save()">保存</button>
</div>
</body>
</html>