<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body tr:nth-child(even) {
background-color: lightgray;
}
body tr:nth-child(odd) {
background-color: lightsteelblue;
}
</style>
<script type="text/javascript" src="js/angularjs-1.55/angular.js"></script>
<script>
//拿去数据
angular.module("tian", [])
.controller("ctrl", function($scope, $http) {
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(dates) {
$scope.dates = dates;
})
//全选
$scope.qx = function() {
for(var i = 0; i < $scope.dates.length; i++) {
if($scope.dates[i].ck = true) {
$scope.dates[i].ck = $scope.qx1;
}
}
}
//批量删除
$scope.delect = function() {
for(var i = 0; i < $scope.dates.length; i++) {
if($scope.dates[i].ck) {
$scope.dates.splice(i, 1);
i--;
}
}
}
//删除
$scope.del = function($index) {
if(confirm('确定删除?')) {
$scope.dates.splice($index, 1);
alert('删除成功');
}
}
//删除全部
$scope.alldelect = function(){
$scope.dates.length = 0;
}
//添加
$scope.save = function() {
var g1 = {
ck: false,
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.dates.push(g1)
$scope.f = false;
}
//修改
$scope.xg = function(info){
var aa = prompt("请修改价格",info.price);
if(aa!= undefined){
info.price=aa;
}
}
})
</script>
</head>
<body ng-app="tian" ng-controller="ctrl">
<button ng-click="f=true" style="background: cornflowerblue;">新增订单</button>
<button ng-click="delect()" style="background: cornflowerblue;">批量删除</button>
<input type="text" ng-model="name1" placeholder="根据商品名查询" />
<input type="text" ng-model="tel1" placeholder="根据手机号名查询" />
<input type="text" ng-model="uoname" placeholder="根据姓名查询" />
<select ng-model="sstate">
<option value="">选择状态</option>-
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="alldelect()">删除全部</button>
<table border="1px">
<tr>
<td> <input type="checkbox" ng-click="qx()" ng-model="qx1"></td>
<td>id <button ng-click="px='id';x=!x" style="background: cornflowerblue;">排序</button> </td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格 <button ng-click="px='price';x=!x" style="background: cornflowerblue;">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='udate';x=!x" style="background: cornflowerblue;">排序</button>
</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in dates | filter:{gname:name1,tel:tel1,state:sstate,uname:uoname} | orderBy:px:x">
<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 |currency:'¥:'}} <!--<input type="text" ng-show="f1" ng-model="d.price" /> <button ng-show="f1" ng-click="f1=false">保存</button>--> </td>
<td>{{d.city}}</td>
<td>{{d.regdate |date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background-color: red;" ng-if="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">{{d.state}} </a>
</span>
<span style="background-color: green;" ng-if="d.state=='已发货'">
已发货
</span>
</td>
<td> <button ng-click="del($index)">删除</button> <button ng-click="xg(d)">修改</button></td>
</tr>
</table>
<div ng-show="f" id="container">
<h1>新增订单</h1> I D
<input ng-model="add_id" placeholder="请输入id" /><br /> 商品名
<input ng-model="add_gname" placeholder="请输入商品名" /><br /> 用户名
<input ng-model="add_uname" placeholder="请输入用户名" /><br /> 手机号
<input ng-model="add_tel" placeholder="请输入电话" type="tel" /><br /> 价 格
<input ng-model="add_price" placeholder="请输入价格" type="number" /><br /> 城 市
<select ng-model="add_city">
<option value="">请输入城市</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>
<style>
body tr:nth-child(even) {
background-color: lightgray;
}
body tr:nth-child(odd) {
background-color: lightsteelblue;
}
</style>
<script type="text/javascript" src="js/angularjs-1.55/angular.js"></script>
<script>
//拿去数据
angular.module("tian", [])
.controller("ctrl", function($scope, $http) {
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(dates) {
$scope.dates = dates;
})
//全选
$scope.qx = function() {
for(var i = 0; i < $scope.dates.length; i++) {
if($scope.dates[i].ck = true) {
$scope.dates[i].ck = $scope.qx1;
}
}
}
//批量删除
$scope.delect = function() {
for(var i = 0; i < $scope.dates.length; i++) {
if($scope.dates[i].ck) {
$scope.dates.splice(i, 1);
i--;
}
}
}
//删除
$scope.del = function($index) {
if(confirm('确定删除?')) {
$scope.dates.splice($index, 1);
alert('删除成功');
}
}
//删除全部
$scope.alldelect = function(){
$scope.dates.length = 0;
}
//添加
$scope.save = function() {
var g1 = {
ck: false,
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.dates.push(g1)
$scope.f = false;
}
//修改
$scope.xg = function(info){
var aa = prompt("请修改价格",info.price);
if(aa!= undefined){
info.price=aa;
}
}
})
</script>
</head>
<body ng-app="tian" ng-controller="ctrl">
<button ng-click="f=true" style="background: cornflowerblue;">新增订单</button>
<button ng-click="delect()" style="background: cornflowerblue;">批量删除</button>
<input type="text" ng-model="name1" placeholder="根据商品名查询" />
<input type="text" ng-model="tel1" placeholder="根据手机号名查询" />
<input type="text" ng-model="uoname" placeholder="根据姓名查询" />
<select ng-model="sstate">
<option value="">选择状态</option>-
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="alldelect()">删除全部</button>
<table border="1px">
<tr>
<td> <input type="checkbox" ng-click="qx()" ng-model="qx1"></td>
<td>id <button ng-click="px='id';x=!x" style="background: cornflowerblue;">排序</button> </td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格 <button ng-click="px='price';x=!x" style="background: cornflowerblue;">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='udate';x=!x" style="background: cornflowerblue;">排序</button>
</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in dates | filter:{gname:name1,tel:tel1,state:sstate,uname:uoname} | orderBy:px:x">
<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 |currency:'¥:'}} <!--<input type="text" ng-show="f1" ng-model="d.price" /> <button ng-show="f1" ng-click="f1=false">保存</button>--> </td>
<td>{{d.city}}</td>
<td>{{d.regdate |date:'MM-dd hh:mm:ss'}}</td>
<td>
<span style="background-color: red;" ng-if="d.state=='未发货'">
<a href="#" ng-click="d.state='已发货'">{{d.state}} </a>
</span>
<span style="background-color: green;" ng-if="d.state=='已发货'">
已发货
</span>
</td>
<td> <button ng-click="del($index)">删除</button> <button ng-click="xg(d)">修改</button></td>
</tr>
</table>
<div ng-show="f" id="container">
<h1>新增订单</h1> I D
<input ng-model="add_id" placeholder="请输入id" /><br /> 商品名
<input ng-model="add_gname" placeholder="请输入商品名" /><br /> 用户名
<input ng-model="add_uname" placeholder="请输入用户名" /><br /> 手机号
<input ng-model="add_tel" placeholder="请输入电话" type="tel" /><br /> 价 格
<input ng-model="add_price" placeholder="请输入价格" type="number" /><br /> 城 市
<select ng-model="add_city">
<option value="">请输入城市</option>
<option>北京</option>
<option>上海</option>
<option>郑州</option>
</select><br />
<button ng-click="save()">保存</button>
</div>
</body>
</html>