<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
th {
background-color: #999999;
}
tr:nth-child(2n) {
background-color: #eeeeee;
}
#sele {
margin-left: 280px;
float: left;
border-color: greenyellow;
}
#add {
float: right;
background-color: green;
margin-right: 280px;
}
#delete {
float: right;
background-color: red;
}
.jing {
color: red;
/*visibility: hidden;*/
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" id="sele" placeholder="按商品名称搜索.." ng-model="fiKey" />
<input type="button" id="add" value="添加商品" ng-click="addGood();" />
<input type="button" id="delete" value="批量删除" ng-click="piliang();" />
<br />
<br />
<table border="1px" cellpadding="0px" cellspacing="1px">
<tr>
<th>
<input type="checkbox" ng-model="checkAll" />
</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>商品总计</th>
<th>下单时间</th>
<th>商品状态</th>
<th>商品会员</th>
<th>收货地址</th>
<th>修改状态</th>
</tr>
<tr ng-repeat="g in goods|filter:fiKey">
<td>
<input type="checkbox" ng-model="checkAll" value="{{$index}}" />
</td>
<td>{{g.name}}</td>
<td>{{g.price|currency}}</td>
<td>{{g.number}}</td>
<td>{{(g.price*g.number)|currency}}</td>
<td>{{ri(g.orderTime)}}</td>
<td>{{fa(g.status)}}</td>
<td>{{g.username}}</td>
<td>{{g.address}}</td>
<td>
<input type="button" id="btn" value="发货" ng-click="update(g.name);" />
</td>
</tr>
</table>
<br />
<br />
<div ng-show="ShowAdd">
<table>
<tr>
<td>商品名称：</td>
<td><input type="text" ng-model="addname" /></td>
<td id="addname" class="jing">*非空</td>
</tr>
<tr>
<td>商品价格：</td>
<td><input type="number" ng-model="addprice" /></td>
<td id="addprice" class="jing">*必须为数字不能小于0</td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="number" ng-model="addnumber" /></td>
<td id="addnumber" class="jing">*必须为数字不能小于0</td>
</tr>
<tr>
<td>会员名称：</td>
<td><input type="text" ng-model="username" /></td>
<td id="username" class="jing">*非空</td>
</tr>
<tr>
<td>收货地址：</td>
<td>
<select ng-init="s1=pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="chan(s1);"></select>----
<select ng-init="s2=cilty[0]" ng-model="s2" ng-options="c for c in cilty"></select>
</td>
</tr>
<tr>
<td>
<input type="button" value="确定添加" ng-click="addd();" />
</td>
</tr>
</table>
</div>
</center>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
//获取数据源
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=monthTest").then(function(response) {
$scope.goods = response.data;
});
//声明
$scope.fiKey = "";
$scope.ShowAdd = false;
//转换日期格式
$scope.ri = function(r) {
var date = new Date(parseInt(r)); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
Y = date.getFullYear() + '-';
M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
return Y + M + D + h + m + s;
}
//判断是否发货
$scope.fa=function(f){
if (f>0) {
// $(this).attr("disabled", true);
return "已发货";
} else{
return "未发货";
}
}
//定义城市
$scope.pros = [{
pro: "北京",
chil: ["西二旗", "东城", "西城"]
}, {
pro: "河南",
chil: ["郑州", "洛阳", "驻马店"]
}];
$scope.cilty = $scope.pros[0].chil;
//二级联动
$scope.chan = function(s) {
$scope.cilty = s.chil;
}
//修改
$scope.update=function(gname){
var updateGood="";
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods[i].status=1;
break;
}
}
}
//添加商品
$scope.addGood = function() {
$scope.ShowAdd = true;
$scope.addname = "";
$scope.addnumber = "";
$scope.addprice = "";
$scope.username = "";
}
//确定添加并判断
$scope.addd = function() {
//判断输入的是否合格
if($scope.addname == null || $scope.addname == "") {
$("#addname").show();
return;
} else {
$("#addname").hide();
}
if($scope.addprice < 0 || $scope.addprice == "") {
$("#addprice").show();
return;
} else {
$("#addprice").hide();
}
if($scope.addnumber < 0 || $scope.addnumber == "") {
$("#addnumber").show();
return;
} else {
$("#addnumber").hide();
}
if($scope.username < 0 || $scope.username == "") {
$("#username").show();
return;
} else {
$("#username").hide();
}
//获取输入的内容
var good = {};
good.name = $scope.addname;
good.price = $scope.addprice;
good.number = $scope.addnumber;
good.username = $scope.username;
good.address = $scope.s1.pro + "-" + $scope.s2;
var timestamp = Date.parse(new Date());
good.orderTime=timestamp;
$scope.goods.push(good);
$scope.ShowAdd = false;
}
//批量删除
$scope.piliang = function() {
if($scope.checkAll) {
$scope.goods = [];
} else {
var checks = $("input:checkbox:checked");
for(var i = checks.length - 1; i >= 0; i--) {
$scope.goods.splice(checks[i].value, 1);
}
}
}
});
</script>
</body>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<style>
th {
background-color: #999999;
}
tr:nth-child(2n) {
background-color: #eeeeee;
}
#sele {
margin-left: 280px;
float: left;
border-color: greenyellow;
}
#add {
float: right;
background-color: green;
margin-right: 280px;
}
#delete {
float: right;
background-color: red;
}
.jing {
color: red;
/*visibility: hidden;*/
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" id="sele" placeholder="按商品名称搜索.." ng-model="fiKey" />
<input type="button" id="add" value="添加商品" ng-click="addGood();" />
<input type="button" id="delete" value="批量删除" ng-click="piliang();" />
<br />
<br />
<table border="1px" cellpadding="0px" cellspacing="1px">
<tr>
<th>
<input type="checkbox" ng-model="checkAll" />
</th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>商品总计</th>
<th>下单时间</th>
<th>商品状态</th>
<th>商品会员</th>
<th>收货地址</th>
<th>修改状态</th>
</tr>
<tr ng-repeat="g in goods|filter:fiKey">
<td>
<input type="checkbox" ng-model="checkAll" value="{{$index}}" />
</td>
<td>{{g.name}}</td>
<td>{{g.price|currency}}</td>
<td>{{g.number}}</td>
<td>{{(g.price*g.number)|currency}}</td>
<td>{{ri(g.orderTime)}}</td>
<td>{{fa(g.status)}}</td>
<td>{{g.username}}</td>
<td>{{g.address}}</td>
<td>
<input type="button" id="btn" value="发货" ng-click="update(g.name);" />
</td>
</tr>
</table>
<br />
<br />
<div ng-show="ShowAdd">
<table>
<tr>
<td>商品名称：</td>
<td><input type="text" ng-model="addname" /></td>
<td id="addname" class="jing">*非空</td>
</tr>
<tr>
<td>商品价格：</td>
<td><input type="number" ng-model="addprice" /></td>
<td id="addprice" class="jing">*必须为数字不能小于0</td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="number" ng-model="addnumber" /></td>
<td id="addnumber" class="jing">*必须为数字不能小于0</td>
</tr>
<tr>
<td>会员名称：</td>
<td><input type="text" ng-model="username" /></td>
<td id="username" class="jing">*非空</td>
</tr>
<tr>
<td>收货地址：</td>
<td>
<select ng-init="s1=pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="chan(s1);"></select>----
<select ng-init="s2=cilty[0]" ng-model="s2" ng-options="c for c in cilty"></select>
</td>
</tr>
<tr>
<td>
<input type="button" value="确定添加" ng-click="addd();" />
</td>
</tr>
</table>
</div>
</center>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
//获取数据源
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=monthTest").then(function(response) {
$scope.goods = response.data;
});
//声明
$scope.fiKey = "";
$scope.ShowAdd = false;
//转换日期格式
$scope.ri = function(r) {
var date = new Date(parseInt(r)); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
Y = date.getFullYear() + '-';
M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
return Y + M + D + h + m + s;
}
//判断是否发货
$scope.fa=function(f){
if (f>0) {
// $(this).attr("disabled", true);
return "已发货";
} else{
return "未发货";
}
}
//定义城市
$scope.pros = [{
pro: "北京",
chil: ["西二旗", "东城", "西城"]
}, {
pro: "河南",
chil: ["郑州", "洛阳", "驻马店"]
}];
$scope.cilty = $scope.pros[0].chil;
//二级联动
$scope.chan = function(s) {
$scope.cilty = s.chil;
}
//修改
$scope.update=function(gname){
var updateGood="";
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name==gname){
$scope.goods[i].status=1;
break;
}
}
}
//添加商品
$scope.addGood = function() {
$scope.ShowAdd = true;
$scope.addname = "";
$scope.addnumber = "";
$scope.addprice = "";
$scope.username = "";
}
//确定添加并判断
$scope.addd = function() {
//判断输入的是否合格
if($scope.addname == null || $scope.addname == "") {
$("#addname").show();
return;
} else {
$("#addname").hide();
}
if($scope.addprice < 0 || $scope.addprice == "") {
$("#addprice").show();
return;
} else {
$("#addprice").hide();
}
if($scope.addnumber < 0 || $scope.addnumber == "") {
$("#addnumber").show();
return;
} else {
$("#addnumber").hide();
}
if($scope.username < 0 || $scope.username == "") {
$("#username").show();
return;
} else {
$("#username").hide();
}
//获取输入的内容
var good = {};
good.name = $scope.addname;
good.price = $scope.addprice;
good.number = $scope.addnumber;
good.username = $scope.username;
good.address = $scope.s1.pro + "-" + $scope.s2;
var timestamp = Date.parse(new Date());
good.orderTime=timestamp;
$scope.goods.push(good);
$scope.ShowAdd = false;
}
//批量删除
$scope.piliang = function() {
if($scope.checkAll) {
$scope.goods = [];
} else {
var checks = $("input:checkbox:checked");
for(var i = checks.length - 1; i >= 0; i--) {
$scope.goods.splice(checks[i].value, 1);
}
}
}
});
</script>
</body>
</html>
效果图：
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
