<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("myApp", []).controller("myCtrl", function($scope, $http) {
$scope.goods = [{
"checked": false,
"gname": "云南白药",
"address": "云南",
"id": 1,
"regDate": "1371120093221",
"price": 100,
"state": "发货"
},
{
"checked": true,
"gname": "999感冒灵",
"address": "北京",
"id": 2,
"regDate": "1371399948599",
"price": 300,
"state": "发货"
},
{
"checked": false,
"gname": "感康",
"address": "河北",
"id": 3,
"regDate": "1371394846499",
"price": 200,
"state": "已发货"
}
]
$scope.save = function() {
var gname = $scope.gname;
var price = $scope.price;
var address = $scope.address;
if(gname == undefined || gname == "") {
$("#gname_span").html("不能为空");
return;
}
if(price == undefined || price == "") {
$("#price_span").html("Cannot be empty");
return;
}
if(address == undefined || address == "") {
$("#address_span").html("不能为空");
return;
}
$scope.goods.push({
checked: false,
gname: gname,
address: address,
id: 1,
regDate: new Date(),
price: price,
state: "未发货"
})
$scope.flag = false;
}
$scope.del = function(index) {
$scope.goods.splice(index, 1);
}
$scope.selectall = function() {
var ic = $scope.ischeck;
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].checked = ic;
}
}
$scope.delall = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope.goods.splice(i, 1);
i--;
}
}
}
$scope.outall = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope. goods[i].state = "Shipped";
$scope.goods[i].checked = false;
$scope.ischeck = false;
}
}
}
$scope.order = ["Please select an order method", "Price Positive order", "price reverse order", "time positive order", "time descending order"];
$scope.optionname = $scope.order[0];
$scope.change = function() {
var value = $scope.optionname;
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;
}
}
$scope.update = function(index) {
$scope.xs = true;
idx = index;
$scope.gname1 = $scope.goods[index].gname;
$scope.price1 = $scope.goods[index].price;
$scope.address1 = $scope.goods[index].address;
}
$scope.xg1 = function() {
$scope.goods[idx].gname = $scope.gname1;
$scope.goods[idx].price = $scope.price1;
$scope.goods[idx].address = $scope.address1;
$scope.xs = false;
}
})
</script>
<style type="text/css">
span {
color: {
color: red;
}
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="flag=true">新增</button>
<button ng-click="delall()">批量删除</button>
<button ng-click="outall()">批量发货</button>
<input ng-model="selectname" type="text" placeholder="请根据商品名查询" />
<input ng-model="selectpro" type="text" placeholder="请根据商品产地查询" />
<select ng-model="optionname" ng-options="s for s in order" ng-change="change()">{{s}}</select><br />
<table border="1" width="900px">
<tr>
<td><input type="checkbox" ng-model="ischeck" ng-change="selectall()"></td>
<td>商品名称</td>
<td>商品产地</td>
<td>商品价格</td>
<td>生产日期</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods | filter:{gname:selectname,address:selectpro}">
<td><input type="checkbox" ng-model="s.checked"></td>
<td>{{s.gname}}</td>
<td>{{s.address}}</td>
<td>{{s.price|currency:"￥"}}</td>
<td>{{s.regDate|date:"yy年MM月dd日 hh时mm分ss秒"}}</td> {{s.state}} <span ng-show="s.state=='shipped'">
<td>
</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 ng-click="update($index)">修改</button></ </td>
</tr>
</table>
<form ng-show="flag">
商品名称:<input type="text" ng-model="gname" class="ipt" /><span id="gname_span"></span><br /> 商品价格:
<input type="text" ng-model="price" class="ipt" /><span id="price_span"></span><br /> 商品产地:
<input type="text" ng-model="address" class="ipt" /><span id="address_span"></span><br />
<button ng-click="save()">提交</button>
</form>
<form ng-show="xs">
商品名称:<input type="text" ng-model="gname1" /><br /> 商品价格:
<input type="text" ng-model="price1" /><br /> 商品产地:
<input type="text" ng-model="address1" /><br />
<button ng-click="xg1()">确定修改</button>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("myApp", []).controller("myCtrl", function($scope, $http) {
$scope.goods = [{
"checked": false,
"gname": "云南白药",
"address": "云南",
"id": 1,
"regDate": "1371120093221",
"price": 100,
"state": "发货"
},
{
"checked": true,
"gname": "999感冒灵",
"address": "北京",
"id": 2,
"regDate": "1371399948599",
"price": 300,
"state": "发货"
},
{
"checked": false,
"gname": "感康",
"address": "河北",
"id": 3,
"regDate": "1371394846499",
"price": 200,
"state": "已发货"
}
]
$scope.save = function() {
var gname = $scope.gname;
var price = $scope.price;
var address = $scope.address;
if(gname == undefined || gname == "") {
$("#gname_span").html("不能为空");
return;
}
if(price == undefined || price == "") {
$("#price_span").html("Cannot be empty");
return;
}
if(address == undefined || address == "") {
$("#address_span").html("不能为空");
return;
}
$scope.goods.push({
checked: false,
gname: gname,
address: address,
id: 1,
regDate: new Date(),
price: price,
state: "未发货"
})
$scope.flag = false;
}
$scope.del = function(index) {
$scope.goods.splice(index, 1);
}
$scope.selectall = function() {
var ic = $scope.ischeck;
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].checked = ic;
}
}
$scope.delall = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope.goods.splice(i, 1);
i--;
}
}
}
$scope.outall = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked == true) {
$scope. goods[i].state = "Shipped";
$scope.goods[i].checked = false;
$scope.ischeck = false;
}
}
}
$scope.order = ["Please select an order method", "Price Positive order", "price reverse order", "time positive order", "time descending order"];
$scope.optionname = $scope.order[0];
$scope.change = function() {
var value = $scope.optionname;
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;
}
}
$scope.update = function(index) {
$scope.xs = true;
idx = index;
$scope.gname1 = $scope.goods[index].gname;
$scope.price1 = $scope.goods[index].price;
$scope.address1 = $scope.goods[index].address;
}
$scope.xg1 = function() {
$scope.goods[idx].gname = $scope.gname1;
$scope.goods[idx].price = $scope.price1;
$scope.goods[idx].address = $scope.address1;
$scope.xs = false;
}
})
</script>
<style type="text/css">
span {
color: {
color: red;
}
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="flag=true">新增</button>
<button ng-click="delall()">批量删除</button>
<button ng-click="outall()">批量发货</button>
<input ng-model="selectname" type="text" placeholder="请根据商品名查询" />
<input ng-model="selectpro" type="text" placeholder="请根据商品产地查询" />
<select ng-model="optionname" ng-options="s for s in order" ng-change="change()">{{s}}</select><br />
<table border="1" width="900px">
<tr>
<td><input type="checkbox" ng-model="ischeck" ng-change="selectall()"></td>
<td>商品名称</td>
<td>商品产地</td>
<td>商品价格</td>
<td>生产日期</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in goods | filter:{gname:selectname,address:selectpro}">
<td><input type="checkbox" ng-model="s.checked"></td>
<td>{{s.gname}}</td>
<td>{{s.address}}</td>
<td>{{s.price|currency:"￥"}}</td>
<td>{{s.regDate|date:"yy年MM月dd日 hh时mm分ss秒"}}</td> {{s.state}} <span ng-show="s.state=='shipped'">
<td>
</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 ng-click="update($index)">修改</button></ </td>
</tr>
</table>
<form ng-show="flag">
商品名称:<input type="text" ng-model="gname" class="ipt" /><span id="gname_span"></span><br /> 商品价格:
<input type="text" ng-model="price" class="ipt" /><span id="price_span"></span><br /> 商品产地:
<input type="text" ng-model="address" class="ipt" /><span id="address_span"></span><br />
<button ng-click="save()">提交</button>
</form>
<form ng-show="xs">
商品名称:<input type="text" ng-model="gname1" /><br /> 商品价格:
<input type="text" ng-model="price1" /><br /> 商品产地:
<input type="text" ng-model="address1" /><br />
<button ng-click="xg1()">确定修改</button>
</form>
</body>
</html>