<!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.0.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
// 准备数据源
$scope.good = [
{"id":"001","name":"罗马皮鞋 ","price":"100","num":"10","address":"北京"},
{"id":"002","name":"香奈儿","price":"500","num":"10","address":"上海"},
{"id":"003","name":"oppoR15","price":"2599","num":"10","address":"广州"},
{"id":"004","name":"vivoX20","price":"3000","num":"2","address":"深圳"}];
// 全选的属性
$scope.checkall = false;
// 添加功能区域
$scope.addIsShow = false;
$scope.newname;
$scope.newsex;
$scope.newhobby;
$scope.newaddress;
$scope.addNewGood = function(){
// 随机数作为id
var n = Math.round(Math.random()*1000);
// 创建新商品对象,属性赋值
var a = {};
a.id = n;
a.name = $scope.newname;
a.price = $scope.newprice;
a.num = $scope.newnum;
a.address = $scope.select1.amode+"-"+$scope.select2.name;
// 添加到数组
$scope.good.push(a);
$scope.addIsShow = false;
$scope.showTable = true;
}
$scope.showTable = true;
// 批量删除
$scope.deleteMore = function(){
// 获取所有选择的checkbox
var cks = $(":checkbox:checked");
for (var i = 0; i < cks.length; i++) {
var ck = cks[i];
var _id = ck.value;
for (var j = 0; j < $scope.good.length; j++) {
if ($scope.good[j].id == _id) {
$scope.good.splice(j,1);
break;
}
}
}
//删除完成以后，判断是否隐藏table
if($scope.good.length==0){//隐藏
$scope.showTable = false;
}
}
//省市区数据源
$scope.proList =[
{
"amode":"河南",
"citys":[
{"name":"郑州",
"area":[{"aname":"郑1区"},{"aname":"郑2区"}]
},
{"name":"开封",
"area":[{"aname":"开1区"},{"aname":"开2区"}]
}
]
},
{
"amode":"河北",
"citys":[
{"name":"石家庄",
"area":[{"aname":"石1区"},{"aname":"石2区"}]
},
{"name":"邯郸",
"area":[{"aname":"邯1区"},{"aname":"邯2区"}]
}
]
}
];
//添加省改变事件
$scope.proChange = function(){
$scope.select2 = $scope.select1.citys[0];
};
//全选/反选
$scope.selectCk = function(){
$scope.checkall = !$scope.checkall;
}
$scope.fanxuan = function(){
var cks = $(":checkbox");//得到所有checkbox
cks.each(function(i){
if(i!=0){//把总的ck排除在外
this.checked= !this.checked;
}
})
}
});
/*姓名非空，只能由字母和数字构成，长度6-12个字符*/
$(function() {
$("#_name").blur(function() { //用户名文本框失去焦点触发验证事件
if($("#_name").val() == "") //只处验证不能为空并且只能为英文或者数字或者下划线组成的２－１５个字符
{
alert("用户名不能为空");
}
});
$("#_price").blur(function() {
var a = $("#_price").val();
if(a < 0)
{
alert("价格必须大于0");
}
});
$("#_num").blur(function() {
var a = $("#_num").val();
if(a < 0)
{
alert("数量必须大于0");
}
});
});
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.one{
text-align: left;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table align="center">
<center>
<input style="width: ;" type="button" value="批量删除" ng-click="deleteMore();" /><br />
<input type="file" /><br />
<!--姓名非空，只能由字母和数字构成，长度6-12个字符-->
<table align="center" >
<tr align="center">
<td>
名字:
</td>
<td>
<input type="text" ng-model="newname" id="_name" />
</td>
</tr>
<tr align="center">
<td>
价格:
</td>
<td>
<input type="text" ng-model="newprice" id="_price" />
</td>
</tr>
<tr align="center">
<td>
数量:
</td>
<td>
<input type="text" ng-model="newnum" id="_num" />
</td>
</tr>
<tr align="center">
<td>
籍贯:
</td>
<td>
<select style="width: 150px;"
ng-model="select1"
ng-init="select1=proList[0]"
ng-change="proChange();"
ng-options="item.amode for item in proList" ></select>
<select style="width: 150px;"
ng-model="select2"
ng-init="select2=select1.citys[0]"
ng-options="data1.name for data1 in select1.citys"
></select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="添加" ng-click="addNewGood();" id="zhuce" />
</td>
</tr>
</table>
<table align="center">
<tr><td><input type="button" value="全选/反选" ng-click="selectCk();" id="zhuce" /></td>
<tr><td><input type="button" value="真正的反选" ng-click="fanxuan();" id="zhuce" /></td></tr>
</table>
<table ng-show="showTable" width="500px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" align="center">
<tr style="background-color: grey;">
<td>
<input type="checkbox" ng-model="checkall" />
</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>库存商品总计</td>
<td>发货地址</td>
</tr>
<tr ng-repeat="p in good" class="{{$index%2 == 0?'red':'green'}}">
<td>
<input type="checkbox" value="{{p.id}}" ng-model="checkall" />
</td>
<td>
{{p.name}}
</td>
<td>
{{p.price}}
</td>
<td>
{{p.num}}
</td>
<td>
{{p.num*p.price}}
</td>
<td>
{{p.address}}
</td>
</tr>
</table>
</center>
</table>
</body>
</html>
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
