<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px auto;
text-align: center;
}
}
</style>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
$scope.flag = false;
$scope.order = ["请选择排序方式", "商品价格升序", "商品价格降序", "生产日期升序", "生产日期降序"];
$http.get("goods.json").then(function(succsee) {
$scope.goods = succsee.data;
})
//添加
$scope.savegood = function() {
var gname = $scope.gname;
var address = $scope.address;
var price = $scope.price;
//验证
if(gname == null || gname == "") {
alert("不能为空");
return;
}
$scope.goods.push({
checked: false,
gname: gname,
address: address,
id: 4,
regDate: new Date(),
price: price,
state: "发货"
})
$scope.flag = false;
}
//单个删除
$scope.del = function(index) {
$scope.goods.splice(index, 1);
}
//修改
$scope.update = function(index) {
$scope.goods[index].address = prompt("修改产地");
}
//全选
$scope.ckAll = function() {
var ckc = $scope.ischeck;
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].checked = ckc;
}
}
//批量删除
$scope.delAll = function() {
//定义默认选中状态
var deafult = false; //没选中
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
deafult = true;
break;
}
}
alert(deafult);
if(deafult) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope.goods.splice(i, 1);
i--;
}
}
} else {
alert("请选择商品");
}
}
//批量发货
$scope.sendAll = function() {
//定义默认选中状态
var deafult = false; //没选中
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
deafult = true;
break;
}
}
alert(deafult);
if(deafult) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope.goods[i].state = "已发货";
$scope.goods[i].checked = false;
}
}
} else {
alert("请选择商品");
}
}
//排序
$scope.change = function() {
var value = $scope.selectValue;
//alert(value);
switch(value) {
case "商品价格升序":
$scope.goods.sort(function(a, b) {
return a.price - b.price;
})
break;
case "商品价格降序":
$scope.goods.sort(function(a, b) {
return b.price - a.price;
})
break;
case "生产日期升序":
$scope.goods.sort(function(a, b) {
return a.regDate - b.regDate;
})
break;
case "生产日期降序":
$scope.goods.sort(function(a, b) {
return b.regDate - a.regDate;
})
break;
default:
break;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="flag=true">新增</button>
<button ng-click="delAll()">批量删除</button>
<button ng-click="sendAll()">批量发货</button>
<input type="text" ng-model="select_name" placeholder="根据商品名字查询" />
<input type="text" ng-model="select_addr" placeholder="根据商品产地查询" />
<select ng-model="selectValue" ng-init="selectValue=order[0]" ng-change="change()" ng-options="s for s in order">{{s}}
</select>
<table border="1px" cellspacing="0" cellpadding="0" width="700px">
<tr style="background-color: grey;">
<td><input type="checkbox" ng-model="ischeck" ng-change="ckAll()" /></td>
<td>商品名称</td>
<td>商品产地</td>
<td>商品价格</td>
<td>生产日期</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods|filter:{'gname':select_name,'address':select_addr}">
<td><input type="checkbox" ng-model="s.checked" /></td>
<td>{{s.gname}}</td>
<td>{{s.address}}</td>
<td>{{s.price}}</td>
<td>{{s.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>
<td>
<span ng-show="s.state=='已发货'">
{{s.state}}
</span>
<span ng-show="s.state=='发货'" ng-click="s.state='已发货'">
<a href="#">{{s.state}}</a>
</span>
</td>
<td>
<button ng-click="del($index)">删除</button> |
<button class="update" ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名:<input ng-model="gname" /><br /> 生产地:
<input ng-model="address" /><br /> 价格 : <input ng-model="price" /><br />
<button ng-click="savegood()">保存</button>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px auto;
text-align: center;
}
}
</style>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
$scope.flag = false;
$scope.order = ["请选择排序方式", "商品价格升序", "商品价格降序", "生产日期升序", "生产日期降序"];
$http.get("goods.json").then(function(succsee) {
$scope.goods = succsee.data;
})
//添加
$scope.savegood = function() {
var gname = $scope.gname;
var address = $scope.address;
var price = $scope.price;
//验证
if(gname == null || gname == "") {
alert("不能为空");
return;
}
$scope.goods.push({
checked: false,
gname: gname,
address: address,
id: 4,
regDate: new Date(),
price: price,
state: "发货"
})
$scope.flag = false;
}
//单个删除
$scope.del = function(index) {
$scope.goods.splice(index, 1);
}
//修改
$scope.update = function(index) {
$scope.goods[index].address = prompt("修改产地");
}
//全选
$scope.ckAll = function() {
var ckc = $scope.ischeck;
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].checked = ckc;
}
}
//批量删除
$scope.delAll = function() {
//定义默认选中状态
var deafult = false; //没选中
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
deafult = true;
break;
}
}
alert(deafult);
if(deafult) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope.goods.splice(i, 1);
i--;
}
}
} else {
alert("请选择商品");
}
}
//批量发货
$scope.sendAll = function() {
//定义默认选中状态
var deafult = false; //没选中
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
deafult = true;
break;
}
}
alert(deafult);
if(deafult) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope.goods[i].state = "已发货";
$scope.goods[i].checked = false;
}
}
} else {
alert("请选择商品");
}
}
//排序
$scope.change = function() {
var value = $scope.selectValue;
//alert(value);
switch(value) {
case "商品价格升序":
$scope.goods.sort(function(a, b) {
return a.price - b.price;
})
break;
case "商品价格降序":
$scope.goods.sort(function(a, b) {
return b.price - a.price;
})
break;
case "生产日期升序":
$scope.goods.sort(function(a, b) {
return a.regDate - b.regDate;
})
break;
case "生产日期降序":
$scope.goods.sort(function(a, b) {
return b.regDate - a.regDate;
})
break;
default:
break;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="flag=true">新增</button>
<button ng-click="delAll()">批量删除</button>
<button ng-click="sendAll()">批量发货</button>
<input type="text" ng-model="select_name" placeholder="根据商品名字查询" />
<input type="text" ng-model="select_addr" placeholder="根据商品产地查询" />
<select ng-model="selectValue" ng-init="selectValue=order[0]" ng-change="change()" ng-options="s for s in order">{{s}}
</select>
<table border="1px" cellspacing="0" cellpadding="0" width="700px">
<tr style="background-color: grey;">
<td><input type="checkbox" ng-model="ischeck" ng-change="ckAll()" /></td>
<td>商品名称</td>
<td>商品产地</td>
<td>商品价格</td>
<td>生产日期</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods|filter:{'gname':select_name,'address':select_addr}">
<td><input type="checkbox" ng-model="s.checked" /></td>
<td>{{s.gname}}</td>
<td>{{s.address}}</td>
<td>{{s.price}}</td>
<td>{{s.regDate|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>
<td>
<span ng-show="s.state=='已发货'">
{{s.state}}
</span>
<span ng-show="s.state=='发货'" ng-click="s.state='已发货'">
<a href="#">{{s.state}}</a>
</span>
</td>
<td>
<button ng-click="del($index)">删除</button> |
<button class="update" ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名:<input ng-model="gname" /><br /> 生产地:
<input ng-model="address" /><br /> 价格 : <input ng-model="price" /><br />
<button ng-click="savegood()">保存</button>
</form>
</body>
</html>