二級聯動（angular）方法實現
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../libs/angular.min.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myctr",function($scope){
i=0;
//定義城市
$scope.pros=[{pro:"北京",children:["西二旗","上地"]},{pro:"河北",children:["石家莊","邯鄲"]}];
$scope.citys=$scope.pros[0].children;
$scope.changecity=function(pro){
$scope.citys=pro.children;
}
$scope.stu=[{
name:"張三",
sex:"男",
rq: new Date("2017-9-"+(i+1) ),
zhuzhi:"北京西二旗"
}];
//添加
$scope.add = function(){
$scope.stu.push({
name:$scope.n,
sex:$scope.sex,
rq: $scope.r,
zhuzhi:$scope.s1.pro+$scope.s2
})
}
//批量刪除
$scope.del = function() {
//遍歷數組
for(var i = 0; i < $scope.stu.length; i++) {
if($scope.stu[i].ck) {
$scope.stu.splice(i, 1);
i--;
}
}
}
//全選
$scope.All = function() {
for(var i=0; i < $scope.stu.length; i++) {
$scope.stu[i].ck = $scope.flag;
}
}
//刪除
$scope.sc=function(i){
$scope.stu.splice(i,1);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myctr">
姓名:<input type="text"placeholder="請輸入姓名" ng-model="n" />
性別:<select ng-model="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="date" ng-model="r"/>
<!--默認選中北京 -->
住址：<select ng-init="s1=pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changcity(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>
<button style="background: lawngreen;" ng-click="add()">添加</button><br>
<button styng-click="All()" style="background: yellow;">全選/反選</button>
<button style="background-color: chartreuse ;" ng-click="del()">批量刪除</button></span>
<br>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="flag" ng-click="All()" /></td>
<td>姓名</td>
<td>性別</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat=" s in stu" >
<td><input type="checkbox" ng-model="s.ck" /></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.rq | date:'MM-dd hh:mm'}}</td>
<td>{{s.zhuzhi}}</td>
<td><button ng-click="sc($index)">刪除</button></td>
</tr>
</table>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章