大白兔4

<!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-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
tr:nth-child(odd){
background: palegoldenrod;
}
tr:nth-child(even){
background: papayawhip;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="button" value="批量删除" ng-click="delall(x.id)"/>
<input type="button" value="添加" ng-click="shopadd=!shopadd"/>
<div ng-show=shopadd>
商品名称：<input type="text" id="name"/><br />
商品价格：<input type="text" id="price"/><br />
商品数量：<input type="text" id="num"/><br />
发货地址：
<select id="sheng">
<option>河南</option>
</select>
———
<select id="shi">
<option>郑州</option>
</select><br />
<input type="button" value="添加" id="add"/>
</div>
<table style="text-align: center;" id="table">
<tr style="background: 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">
<td><input type="checkbox" ng-model="all" value="{{x.id}}"/></td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.num}}</td>
<td>{{x.price*x.num}}</td>
<td>{{x.address}}</td>

</tr>
</table>

<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myCtrl",function($scope){

var datas=new Array();
datas["河南"]=["郑州","安阳","漯河"];
datas["北京"]=["西二旗","西直门","软件园"];
for(city in datas){
$("#sheng").append("<option>"+city+"</option>");
}

$scope.shopadd=false;

$scope.shops=[{id:1,name:"罗马皮鞋",price:100,num:10,address:"河南-郑州"},{id:2,name:"香奈儿",price:500,num:10,address:"河南-郑州"},{id:3,name:"oppor15",price:2599,num:10,address:"山西-太原"},{id:4,name:"vivox20",price:3000,num:2,address:"北京-西二旗"}];

$scope.del=function(id){
var cbs=confirm("确定要删除吗？");
if(cbs){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id==id){
$scope.shops.splice(i,1);
break;
}
}
}
}

$scope.delall=function(){
var cbs=$("input:checked");
if(cbs.length==0){
alert("请选中数据再删除？");
}else{
var result=confirm("确定要删除吗？");
if(result){
cbs.each(function(){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id==$(this).val()){
$scope.shops.splice(i,1);
break;
}

}
})
}
}
}

$("#add").click(function(){
var name=$("#name").val();
var price=$("#price").val();
var num=$("#num").val();
var shengl=$("#sheng").val();
var cityl=$("#shi").val();
var address=shengl+"-"+cityl;
var tr="<tr ng-repeat='x in shops'><td><input type='checkbox' ng-model='all' value='{{x.id}}'/></td><td>"+name+"</td><td>"+price+"</td><td>"+num+"</td><td>"+num*price+"</td><td>"+address+"</td></tr>";
$("#table").append(tr);
});

$("#sheng").change(function(){
var sheng=$("#sheng").val();
var citys=datas[sheng];
$("#shi").empty();
$("#shi").append("<option>--请选择--</option>");
for (var i = 0; i < citys.length; i++) {
var c=citys[i];
$("#shi").append("<option>"+c+"</option>");
}
});
});
</script>
</body>
</html>

猜你喜欢