<!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.1.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycontr",function($scope){
$scope.goods=[{name:'張三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' },
{name:'李四',sex:'男',birth:new Date('1995-05-24'),addres:'北京-西二旗' },
{name:'王三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' }
];
$scope.tablegoods={};
//添加
$scope.add=function(){
var good={};
if($scope.name=="" || $scope.name==null){
$scope.namenn=true;
return;
}else{
good.name=$scope.name;
$scope.namenn=false;
}
good.sex=$scope.sex;
good.birth=$scope.birth;
good.addres=$scope.pro+"-"+$scope.citys;
$scope.goods.push(good);
$scope.myadd=false;
}
//刪除
$scope.dele=function(index){
var a=confirm("你確定刪除嗎？");
if(a){
$scope.goods.splice(index,1);
}
}
//批量刪除
$scope.pl=function(){
if($scope.che){
$scope.goods=[];
}else{
var checked=$("input[type=checkbox]:checked");
for (var i=checked.length-1;i>=0;i--) {
$scope.goods.splice(checked[i].value,1);
}
}
}
//修改回顯
$scope.xiu=function(name){
$scope.xiuq=true;
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].name == name){
$scope.tablegoods=$scope.goods[i];
$scope.name=$scope.goods[i].name;
$scope.sex=$scope.goods[i].sex;
$scope.birth=$scope.goods[i].birth;
// $scope.pro=$scope.goods[i].pro;
// $scope.citys=$scope.goods[i].citys;
break;
}
}
}
//修改
$scope.updata=function(){
$scope.tablegoods.name=$scope.name;
$scope.tablegoods.sex=$scope.sex;
$scope.tablegoods.birth=$scope.birth;
$scope.xiuq=false;
}
});
</script>
<style>
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body ng-app="myapp" ng-controller="mycontr" >
<button ng-click="myadd=!myadd">入庫</button>
<button ng-click="pl()">批量刪除</button>
模糊查詢：<input type="text" ng-model="chaxun" />
排序<select ng-model="orderKey">
<option value="">排序</option>
<option value="birth">生日正序</option>
<option value="-birth">生日到序</option>
</select>
<form ng-show="myadd">
姓名：<input type="text" ng-model="name" /><span ng-show="namenn">名字不能爲空</span> <br />
性別：<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
<br />
生日：<input type="date" ng-model="birth" /><br />
地址：<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
<option value="">請選擇省份</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="city" ng-model="citys" ng-init="citys='昌平'">
<option value="">請選擇城市</option>
<option>海淀</option>
<option>昌平</option>
</select>
<br />
<input type="button" value="添加" ng-click="add()" />
</form>
<table border="1">
<tr style="background-color: #ccc;">
<td><input type="checkbox" ng-model="che"/></td>
<td>姓名</td>
<td>性別</td>
<td>生日</td>
<td>地址</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in goods | filter:chaxun |orderBy:orderKey" class="{{$index%2 ? 'red':'yellow'}}">
<td><input type="checkbox" ng-model="che" value="{{$index}}" /></td>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
<td>{{x.birth | date:"yyyy-MM-dd hh:mm:ss "}}</td>
<td>{{x.addres}}</td>
<td>
<input type="button" value="刪除" ng-click="dele($index)"/>
<button ng-click="xiu(x.name)">修改</button>
</td>
</tr>
</table>
<!--//修改-->
<form ng-show="xiuq">
姓名：<input type="text" ng-model="name" /><br />
性別：<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
<br />
生日：<input type="date" ng-model="birth" /><br />
<!--地址：<select id="pro" ng-model="pro" οnchange="getcitys()">
<option value="">請選擇省份</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="city" ng-model="citys" >
<option value="">請選擇城市</option>
<option>海淀</option>
<option>昌平</option>
</select>
<br />-->
<input type="button" value="修改" ng-click="updata()" />
</form>
<script>
var datas=[{pro:"北京",citys:["海淀","昌平"]},{pro:"河北",citys:["石家莊","張家口"]},{pro:"河南",citys:["安陽","濮陽"]}];
function getcitys(){
//先把之前的數據清空
$("#city option").remove();
var datas_citys=[];//存放對應的省份的城市
//得到選擇的省份
var p=$("#pro").val();
for (var i in datas) {
if(datas[i].pro==p){
datas_citys=datas[i].citys;
break;
}
}
//添加到城市中
for(var i in datas_citys){
var op=$("<option>"+datas_citys[i]+"</option>")
$("#city").append(op);
}
}
</script>
</body>
</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.1.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycontr",function($scope){
$scope.goods=[{name:'張三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' },
{name:'李四',sex:'男',birth:new Date('1995-05-24'),addres:'北京-西二旗' },
{name:'王三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' }
];
$scope.tablegoods={};
//添加
$scope.add=function(){
var good={};
if($scope.name=="" || $scope.name==null){
$scope.namenn=true;
return;
}else{
good.name=$scope.name;
$scope.namenn=false;
}
good.sex=$scope.sex;
good.birth=$scope.birth;
good.addres=$scope.pro+"-"+$scope.citys;
$scope.goods.push(good);
$scope.myadd=false;
}
//刪除
$scope.dele=function(index){
var a=confirm("你確定刪除嗎？");
if(a){
$scope.goods.splice(index,1);
}
}
//批量刪除
$scope.pl=function(){
if($scope.che){
$scope.goods=[];
}else{
var checked=$("input[type=checkbox]:checked");
for (var i=checked.length-1;i>=0;i--) {
$scope.goods.splice(checked[i].value,1);
}
}
}
//修改回顯
$scope.xiu=function(name){
$scope.xiuq=true;
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].name == name){
$scope.tablegoods=$scope.goods[i];
$scope.name=$scope.goods[i].name;
$scope.sex=$scope.goods[i].sex;
$scope.birth=$scope.goods[i].birth;
// $scope.pro=$scope.goods[i].pro;
// $scope.citys=$scope.goods[i].citys;
break;
}
}
}
//修改
$scope.updata=function(){
$scope.tablegoods.name=$scope.name;
$scope.tablegoods.sex=$scope.sex;
$scope.tablegoods.birth=$scope.birth;
$scope.xiuq=false;
}
});
</script>
<style>
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body ng-app="myapp" ng-controller="mycontr" >
<button ng-click="myadd=!myadd">入庫</button>
<button ng-click="pl()">批量刪除</button>
模糊查詢：<input type="text" ng-model="chaxun" />
排序<select ng-model="orderKey">
<option value="">排序</option>
<option value="birth">生日正序</option>
<option value="-birth">生日到序</option>
</select>
<form ng-show="myadd">
姓名：<input type="text" ng-model="name" /><span ng-show="namenn">名字不能爲空</span> <br />
性別：<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
<br />
生日：<input type="date" ng-model="birth" /><br />
地址：<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
<option value="">請選擇省份</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="city" ng-model="citys" ng-init="citys='昌平'">
<option value="">請選擇城市</option>
<option>海淀</option>
<option>昌平</option>
</select>
<br />
<input type="button" value="添加" ng-click="add()" />
</form>
<table border="1">
<tr style="background-color: #ccc;">
<td><input type="checkbox" ng-model="che"/></td>
<td>姓名</td>
<td>性別</td>
<td>生日</td>
<td>地址</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in goods | filter:chaxun |orderBy:orderKey" class="{{$index%2 ? 'red':'yellow'}}">
<td><input type="checkbox" ng-model="che" value="{{$index}}" /></td>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
<td>{{x.birth | date:"yyyy-MM-dd hh:mm:ss "}}</td>
<td>{{x.addres}}</td>
<td>
<input type="button" value="刪除" ng-click="dele($index)"/>
<button ng-click="xiu(x.name)">修改</button>
</td>
</tr>
</table>
<!--//修改-->
<form ng-show="xiuq">
姓名：<input type="text" ng-model="name" /><br />
性別：<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
<br />
生日：<input type="date" ng-model="birth" /><br />
<!--地址：<select id="pro" ng-model="pro" οnchange="getcitys()">
<option value="">請選擇省份</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="city" ng-model="citys" >
<option value="">請選擇城市</option>
<option>海淀</option>
<option>昌平</option>
</select>
<br />-->
<input type="button" value="修改" ng-click="updata()" />
</form>
<script>
var datas=[{pro:"北京",citys:["海淀","昌平"]},{pro:"河北",citys:["石家莊","張家口"]},{pro:"河南",citys:["安陽","濮陽"]}];
function getcitys(){
//先把之前的數據清空
$("#city option").remove();
var datas_citys=[];//存放對應的省份的城市
//得到選擇的省份
var p=$("#pro").val();
for (var i in datas) {
if(datas[i].pro==p){
datas_citys=datas[i].citys;
break;
}
}
//添加到城市中
for(var i in datas_citys){
var op=$("<option>"+datas_citys[i]+"</option>")
$("#city").append(op);
}
}
</script>
</body>
</html>
