（ angular）二級聯動 增 刪 改 查
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-3.2.1.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//模擬數據
$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.citys = $scope.pros[0].childer;
$scope.changeCity = function(s1){
$scope.citys = $scope.s1.childer;
}
//添加
$scope.addPro = 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.showUpdate=false;
//定義接收修改信息的字段
$scope.upname="";
$scope.upsex="";
$scope.upbirth="";
$scope.upzhuzhi="";
//要修改的信息
var updateStus="";
$scope.updateStu=function(gname){
//顯示修改回顯區域
$scope.showUpdate=true;
//遍歷數組，找到要修改的商品
for (var i = 0; i <$scope.stu.length; i++) {
if($scope.stu[i].name==gname){//遍歷得到的商品信息就是我們要刪除的，，i就是他再數組中的索引
updateStus=$scope.stu[i];
break;//找到修改的商品後，跳出循環
}
}
//顯示修改信息到頁面，，第一步得到修改信息
$scope.upname=updateStus.name;
$scope.upsex=updateStus.sex;
$scope.upbirth=updateStus.birth;
$scope.upzhuzhi=updateStus.zhuzhi;
}
//提交修改
$scope.updateStus=function(){
updateStus.name=$scope.upname;
updateStus.sex=$scope.upsex;
updateStus.birth=$scope.upbirth;
updateStus.zhuzhi=$scope.upzhuzhi;
//隱藏修改回顯區域
$scope.showUpdate=false;
}
//全選反選
$scope.xuan = function(){
for (var i = 0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = !$scope.stu[i].ck;
}
}
//批量刪除
$scope.deleteMore = function(){
for (var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck){
$scope.stu.splice(i,1);
i--;
}
}
}
});
</script>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
查詢：<input type="text" placeholder="請輸入查詢關鍵字" ng-model="sera" />
排序：<select ng-model="orderKey">
<option value="">--請選擇--</option>
<option value="birth">生日正序</option>
<option value="-birth">生日倒序</option>
</select>
<input type="button" value="添加" ng-click="showAdd = !showAdd" /><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-init="s1 = pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changeCity(s1)">
<option value="">--請選擇省份--</option>
</select>
市：<select ng-init="s2 = citys[0]" ng-model="s2" ng-options="c for c in citys">
<option value="">--請選擇城市--</option>
</select><br />
<input type="button" value="提交添加" ng-click="addPro()" />
</div>
<br />
<table border="1px" bordercolor="green" cellpadding="5px">
<tr style="background-color: gray;">
<th><input type="checkbox" ng-model="check" ng-click="All()"/></th>
<th>姓名</th>
<th>性別</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in stu| filter:sera |orderBy:orderKey">
<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="updateStu(s.name)" />
</td>
</tr>
</table>
<div ng-show="showUpdate">
姓名：<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="updateStus()" />
</div>
<input type="button" value="批量刪除" ng-click="deleteMore()" style="background-color: green;"/>
<input type="button" value="全選反選" ng-click="xuan()" style="background-color: yellow;"/>
<br /><br />
</center>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.