<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
ul {
list-style: none;
}
.a {
background-color: gainsboro;
}
.b {
background-color: white;
}
</style>
<title></title>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<input type="button" value="添加" ng-click="showAdd=!showAdd"/>
<input type="button" value="批量删除" ng-click="plsc()" />
</div>
<table border="1" cellspacing="0" cellpadding="1" width="30%">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="All" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>库存数量</th>
<th>库存商品总计</th>
<th>发货地址</th>
</tr>
<tr ng-repeat="x in shops" class="{{$index%2==0?'a':'b'}}">
<td><input type="checkbox" value="{{x.name}}" ng-model="All" /></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.num}}</td>
<td>{{x.price*x.num}}</td>
<td>{{x.pro}}-{{x.city}}</td>
</tr>
</table>
<div ng-show="showAdd">
<ul>
<li>商品名称:<input type="text" ng-model="aname" /></li>
<li>商品价格:<input type="text" ng-model="aprice" /></li>
<li>商品数量:<input type="text" ng-model="anum" /></li>
<li>发货地址:
<select ng-init="apro=pdatas[0]" ng-model="apro" ng-options="p.pro for p in pdatas" ng-change="chage()">
</select>
<select ng-init="acity=apro.city[0]" ng-model="acity" ng-options=" c for c in apro.city">
</select>
<input type="button" value="添加" ng-click="Add()"/>
</ul>
</div>
</center>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
showAdd=false;
$scope.shops = [{
"name": "罗马皮鞋",
"price": 100,
"num": 10,
"pro": "河南",
"city": "郑州"
}, {
"name": "香奈儿",
"price": 500,
"num": 10,
"pro": "河南",
"city": "郑州"
}, {
"name": "oppoR15",
"price": 2599,
"num": 10,
"pro": "山西",
"city": "太原"
}, {
"name": "vivox20",
"price": 3000,
"num": 2,
"pro": "北京",
"city": "西二旗"
}];
$scope.pdatas = [{
pro: "河北",
city: ["邯郸", "承德", "石家庄"]
}, {
pro: "山东",
city: ["德州", "济南", "潍坊", "青岛"]
}]
$scope.chage = function() {
$scope.acity = $scope.apro.city[0]
}
$scope.Add=function(){
var c=$scope.acity;
var newShops={};
newShops.name=$scope.aname;
newShops.price=$scope.aprice;
newShops.num=$scope.anum;
newShops.pro=$scope.apro.pro;
newShops.city=$scope.acity;
if ($scope.aname==null||$scope.aprice<0||$scope.aprice==null||$scope.anum<0||$scope.anum==null) {
alert("信息输入有误")
}else{
$scope.shops.push(newShops);
}
showAdd=false;
}
$scope.plsc = function() {
var cbs = $("input:checked");
if(cbs.length == 0) {
alert("请先选择")
} else {
var b = confirm("确定删除吗")
if(b) {
cbs.each(function() {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name == $(this).val()) {
$scope.shops.splice(i, 1);
break;
}
}
});
}
}
}
// $scope.Add=function(){
// var newShops={};
// newShops
// }
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
ul {
list-style: none;
}
.a {
background-color: gainsboro;
}
.b {
background-color: white;
}
</style>
<title></title>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<div>
<input type="button" value="添加" ng-click="showAdd=!showAdd"/>
<input type="button" value="批量删除" ng-click="plsc()" />
</div>
<table border="1" cellspacing="0" cellpadding="1" width="30%">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="All" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>库存数量</th>
<th>库存商品总计</th>
<th>发货地址</th>
</tr>
<tr ng-repeat="x in shops" class="{{$index%2==0?'a':'b'}}">
<td><input type="checkbox" value="{{x.name}}" ng-model="All" /></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.num}}</td>
<td>{{x.price*x.num}}</td>
<td>{{x.pro}}-{{x.city}}</td>
</tr>
</table>
<div ng-show="showAdd">
<ul>
<li>商品名称:<input type="text" ng-model="aname" /></li>
<li>商品价格:<input type="text" ng-model="aprice" /></li>
<li>商品数量:<input type="text" ng-model="anum" /></li>
<li>发货地址:
<select ng-init="apro=pdatas[0]" ng-model="apro" ng-options="p.pro for p in pdatas" ng-change="chage()">
</select>
<select ng-init="acity=apro.city[0]" ng-model="acity" ng-options=" c for c in apro.city">
</select>
<input type="button" value="添加" ng-click="Add()"/>
</ul>
</div>
</center>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
showAdd=false;
$scope.shops = [{
"name": "罗马皮鞋",
"price": 100,
"num": 10,
"pro": "河南",
"city": "郑州"
}, {
"name": "香奈儿",
"price": 500,
"num": 10,
"pro": "河南",
"city": "郑州"
}, {
"name": "oppoR15",
"price": 2599,
"num": 10,
"pro": "山西",
"city": "太原"
}, {
"name": "vivox20",
"price": 3000,
"num": 2,
"pro": "北京",
"city": "西二旗"
}];
$scope.pdatas = [{
pro: "河北",
city: ["邯郸", "承德", "石家庄"]
}, {
pro: "山东",
city: ["德州", "济南", "潍坊", "青岛"]
}]
$scope.chage = function() {
$scope.acity = $scope.apro.city[0]
}
$scope.Add=function(){
var c=$scope.acity;
var newShops={};
newShops.name=$scope.aname;
newShops.price=$scope.aprice;
newShops.num=$scope.anum;
newShops.pro=$scope.apro.pro;
newShops.city=$scope.acity;
if ($scope.aname==null||$scope.aprice<0||$scope.aprice==null||$scope.anum<0||$scope.anum==null) {
alert("信息输入有误")
}else{
$scope.shops.push(newShops);
}
showAdd=false;
}
$scope.plsc = function() {
var cbs = $("input:checked");
if(cbs.length == 0) {
alert("请先选择")
} else {
var b = confirm("确定删除吗")
if(b) {
cbs.each(function() {
for(var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].name == $(this).val()) {
$scope.shops.splice(i, 1);
break;
}
}
});
}
}
}
// $scope.Add=function(){
// var newShops={};
// newShops
// }
});
</script>
</body>
</html>