<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<script>
var url="http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1";
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope,$http){
$http.get("stu.json").then(function(response){
$scope.stu=response.data;
})
$http.get("pros.json").then(function(response){
$scope.pros=response.data;
})
/*//數據源
$scope.stu=[{
name:"張三",
sex:"男",
birth: new Date("1998-10-06" ),
zhuzhi:"北京西二旗"
},{
name:"李四",
sex:"女",
birth: new Date("1997-11-26" ),
zhuzhi:"北京西二旗"
},{
name:"王五",
sex:"男",
birth: new Date("1999-05-06" ),
zhuzhi:"河北邯鄲"
}];
//定義城市
$scope.pros = [{pro:"北京",childer:["西二旗","上地"]},
{pro:"河北",childer:["邯鄲","石家莊","保定"]}];*/
//點擊添加
$scope.add=function(){
var stus={};
//信息校驗
if($scope.name==null||$scope.name==""){
$scope.showName=true;
return;
}
else{
stus.name = $scope.name;
$scope.showName = false;
}
if($scope.sex == null){//性別校驗
$scope.showSex=true;
return;
}
else{
stus.sex = $scope.sex;
$scope.showSex = false;
}
if ($scope.birth == null) {//生日校驗
$scope.showBirth = true;
return;
} else{
stus.birth = $scope.birth;
$scope.showBirth = false;
}
stus.zhuzhi = $scope.s1.pro+$scope.s2;
$scope.stu.push(stus);
//添加隱藏
$scope.showAdd = false;
}
//刪除
$scope.deleteStu = function(sname){
for (var i = 0; i < $scope.stu.length; i++) {
if ($scope.stu[i].name == sname) {
$scope.stu.splice(i,1)
}
}
}
//點擊標題的複選框，實現全選功能
$scope.All = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.check;
}
}
//批量刪除
$scope.pishan = function(){
for (var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck){
$scope.stu.splice(i,1);
i--;
}
}
}
//定義修改的商品
var upstu="";
//修改
$scope.xiugaiStu=function(uname){
for (var i = 0; i < $scope.stu.length; i++) {
if(uname==$scope.stu[i].name){
$scope.upshow=true;
upstu=$scope.stu[i];
break;
}
}
$scope.upname=upstu.name;
$scope.upsex=upstu.sex;
$scope.upbirth=new Date(upstu.birth);
$scope.upzhuzhi=upstu.zhuzhi;
}
//修改
$scope.updata=function(){
upstu.name=$scope.upname;
upstu.sex=$scope.upsex;
upstu.birth=$scope.upbirth;
upstu.zhuzhi=$scope.upzhuzhi;
$scope.upshow=false;
}
});
</script>
<center>
<div>
查詢:<input type="text" placeholder="請輸入查詢的關鍵字" ng-model="chaxun"/>
排序:<select ng-model="paixun">
<option value="">---請選擇---</option>
<option value="birth">生日正序</option>
<option value="-birth">生日倒序</option>
</select>
<input type="button" value="添加" ng-click="showAdd=!showAdd"/>
</div>
<br />
<br />
<div ng-show="showAdd">
姓名:<input type="text" placeholder="請輸入姓名" ng-model="name"/><span ng-show="showName">姓名不能爲空</span><br />
性別:<select ng-model="sex">
<option value="">---請選擇---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<span ng-show="showSex">請選擇性別</span><br />
生日:<input type="date" ng-model="birth" /><span ng-show="showBirth">請輸入生日</span><br />
住址:<select ng-model="s1" ng-init="s1=pros[0]" ng-options="p.pro for p in pros" >
<option value="">---請選擇省份---</option>
</select>
市:<select ng-model="s2" ng-init="s2=pros[0][0]" ng-options="c for c in s1.childer">
<option value="">---請選擇城市---</option>
</select>
<br />
<input type="button" value="提交添加" ng-click="add()" />
</div>
<br />
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="check" ng-click="All()"/></td>
<td>姓名</td>
<td>性別</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in stu|filter:chaxun |orderBy:paixun">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.birth | date:'yyyy-MM-dd hh:mm'}}</td>
<td>{{s.zhuzhi}}</td>
<td>
<input type="button" value="刪除" ng-click="deleteStu(s.name)" />
<input type="button" value="修改" ng-click="xiugaiStu(s.name)" />
</td>
</tr>
</table>
<br />
<div ng-show="upshow">
姓名:<input type="text" placeholder="請輸入姓名" ng-model="upname"/><br />
性別:<select ng-model="upsex">
<option value="">---請選擇---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<br />
生日:<input type="date" ng-model="upbirth" /><br />
住址:<input type="text" ng-model="upzhuzhi"/>
<br />
<input type="button" value="修改" ng-click="updata()" />
</div>
<input type="button" value="批量刪除" ng-click="pishan()"/>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<script>
var url="http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=test1";
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope,$http){
$http.get("stu.json").then(function(response){
$scope.stu=response.data;
})
$http.get("pros.json").then(function(response){
$scope.pros=response.data;
})
/*//數據源
$scope.stu=[{
name:"張三",
sex:"男",
birth: new Date("1998-10-06" ),
zhuzhi:"北京西二旗"
},{
name:"李四",
sex:"女",
birth: new Date("1997-11-26" ),
zhuzhi:"北京西二旗"
},{
name:"王五",
sex:"男",
birth: new Date("1999-05-06" ),
zhuzhi:"河北邯鄲"
}];
//定義城市
$scope.pros = [{pro:"北京",childer:["西二旗","上地"]},
{pro:"河北",childer:["邯鄲","石家莊","保定"]}];*/
//點擊添加
$scope.add=function(){
var stus={};
//信息校驗
if($scope.name==null||$scope.name==""){
$scope.showName=true;
return;
}
else{
stus.name = $scope.name;
$scope.showName = false;
}
if($scope.sex == null){//性別校驗
$scope.showSex=true;
return;
}
else{
stus.sex = $scope.sex;
$scope.showSex = false;
}
if ($scope.birth == null) {//生日校驗
$scope.showBirth = true;
return;
} else{
stus.birth = $scope.birth;
$scope.showBirth = false;
}
stus.zhuzhi = $scope.s1.pro+$scope.s2;
$scope.stu.push(stus);
//添加隱藏
$scope.showAdd = false;
}
//刪除
$scope.deleteStu = function(sname){
for (var i = 0; i < $scope.stu.length; i++) {
if ($scope.stu[i].name == sname) {
$scope.stu.splice(i,1)
}
}
}
//點擊標題的複選框，實現全選功能
$scope.All = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.check;
}
}
//批量刪除
$scope.pishan = function(){
for (var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck){
$scope.stu.splice(i,1);
i--;
}
}
}
//定義修改的商品
var upstu="";
//修改
$scope.xiugaiStu=function(uname){
for (var i = 0; i < $scope.stu.length; i++) {
if(uname==$scope.stu[i].name){
$scope.upshow=true;
upstu=$scope.stu[i];
break;
}
}
$scope.upname=upstu.name;
$scope.upsex=upstu.sex;
$scope.upbirth=new Date(upstu.birth);
$scope.upzhuzhi=upstu.zhuzhi;
}
//修改
$scope.updata=function(){
upstu.name=$scope.upname;
upstu.sex=$scope.upsex;
upstu.birth=$scope.upbirth;
upstu.zhuzhi=$scope.upzhuzhi;
$scope.upshow=false;
}
});
</script>
<center>
<div>
查詢:<input type="text" placeholder="請輸入查詢的關鍵字" ng-model="chaxun"/>
排序:<select ng-model="paixun">
<option value="">---請選擇---</option>
<option value="birth">生日正序</option>
<option value="-birth">生日倒序</option>
</select>
<input type="button" value="添加" ng-click="showAdd=!showAdd"/>
</div>
<br />
<br />
<div ng-show="showAdd">
姓名:<input type="text" placeholder="請輸入姓名" ng-model="name"/><span ng-show="showName">姓名不能爲空</span><br />
性別:<select ng-model="sex">
<option value="">---請選擇---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<span ng-show="showSex">請選擇性別</span><br />
生日:<input type="date" ng-model="birth" /><span ng-show="showBirth">請輸入生日</span><br />
住址:<select ng-model="s1" ng-init="s1=pros[0]" ng-options="p.pro for p in pros" >
<option value="">---請選擇省份---</option>
</select>
市:<select ng-model="s2" ng-init="s2=pros[0][0]" ng-options="c for c in s1.childer">
<option value="">---請選擇城市---</option>
</select>
<br />
<input type="button" value="提交添加" ng-click="add()" />
</div>
<br />
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="check" ng-click="All()"/></td>
<td>姓名</td>
<td>性別</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in stu|filter:chaxun |orderBy:paixun">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.birth | date:'yyyy-MM-dd hh:mm'}}</td>
<td>{{s.zhuzhi}}</td>
<td>
<input type="button" value="刪除" ng-click="deleteStu(s.name)" />
<input type="button" value="修改" ng-click="xiugaiStu(s.name)" />
</td>
</tr>
</table>
<br />
<div ng-show="upshow">
姓名:<input type="text" placeholder="請輸入姓名" ng-model="upname"/><br />
性別:<select ng-model="upsex">
<option value="">---請選擇---</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<br />
生日:<input type="date" ng-model="upbirth" /><br />
住址:<input type="text" ng-model="upzhuzhi"/>
<br />
<input type="button" value="修改" ng-click="updata()" />
</div>
<input type="button" value="批量刪除" ng-click="pishan()"/>
</center>
</body>
</html>