二級聯動angularjs實現
阿新 • • 發佈：2019-02-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
tr:nth-child(even){
background-color: gainsboro;
}
</style>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
//1.通過http服務,去請求訪問,二級聯動的地址資料
$http.get("addr.json").then(function(success) {
$scope.addr = success.data;
//初始化省份和城市
$scope.sel_province = $scope.addr[0];
$scope.sel_city = $scope.sel_province.citys[0];
})
//建立一個數組,,,,用來儲存新增的資料
$scope.users = [];
$scope.sex = "男";
//2.切換的事件
$scope.changePro = function() {
$scope.sel_city = $scope.sel_province.citys[0];
}
//3.新增
$scope.add = function() {
//3.1獲取到輸入的內容
var name = $scope.name;
var sex = $scope.sex;
var dates = $scope.dates;
var pro = $scope.sel_province.province;
var city = $scope.sel_city.city;
//alert(name+"--"+sex+"--"+dates+"--"+pro+"--"+city);
if(name.length < 3 || name.length > 30) {
alert("姓名:格式不正確");
return;
}
if(sex == undefined || sex == "") {
alert("性別:格式不正確");
return;
}
if(dates == undefined || dates == "") {
alert("生日:格式不正確");
return;
}
//新增到陣列
$scope.users.push({
name: name,
sex: sex,
dates: dates,
addr: pro + "-" + city
})
}
//4.單個刪除
$scope.del = function(index) {
var flag = confirm("是否確定刪除");
if (flag) {
$scope.users.splice(index, 1);
alert("刪除成功");
}
}
//5.全選/全不選
$scope.changeCheck=function () {
for (var i = 0; i < $scope.users.length; i++) {
$scope.users[i].check=$scope.ischeck;
}
}
//6.批量刪除
$scope.delAll=function () {
for (var i = 0; i < $scope.users.length; i++) {
if ($scope.users[i].check) {
$scope.users.splice(i,1);
i--;
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl" style="width: 800px;">
姓名:<input type="text" ng-model="name" /> 性別:
<select ng-model="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
生日:<input type="date" ng-model="dates" /> 住址:
<select ng-model="sel_province" ng-options="pro.province for pro in addr" ng-change="changePro()"></select>
<select ng-model="sel_city" ng-options="cty.city for cty in sel_province.citys"></select>
<button ng-click="add()" style="background-color: greenyellow;">新增</button><br />
<button ng-click="delAll()" style="background-color: red;float: right;">批量刪除</button>
<table border="1px" cellspacing="0" cellpadding="0" width="800px">
<tr style="background-color: grey;">
<td><input type="checkbox" ng-model="ischeck" ng-change="changeCheck()" /></td>
<td>姓名</td>
<td><button ng-click="px='sex';sj=!sj">排序</button>性別</td>
<td>生日</td>
<td>住址</td>
<td>刪除</td>
</tr>
<tr ng-repeat="s in users|orderBy:px:sj">
<td><input type="checkbox" ng-model="s.check" /></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.dates|date:"yyyy-MM-dd"}}</td>
<td>{{s.addr}}</td>
<td><button ng-click="del($index)">刪除</button></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
tr:nth-child(even){
background-color: gainsboro;
}
</style>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
//1.通過http服務,去請求訪問,二級聯動的地址資料
$http.get("addr.json").then(function(success) {
$scope.addr = success.data;
//初始化省份和城市
$scope.sel_province = $scope.addr[0];
$scope.sel_city = $scope.sel_province.citys[0];
})
//建立一個數組,,,,用來儲存新增的資料
$scope.users = [];
$scope.sex = "男";
//2.切換的事件
$scope.changePro = function() {
$scope.sel_city = $scope.sel_province.citys[0];
}
//3.新增
$scope.add = function() {
//3.1獲取到輸入的內容
var name = $scope.name;
var sex = $scope.sex;
var dates = $scope.dates;
var pro = $scope.sel_province.province;
var city = $scope.sel_city.city;
//alert(name+"--"+sex+"--"+dates+"--"+pro+"--"+city);
if(name.length < 3 || name.length > 30) {
alert("姓名:格式不正確");
return;
}
if(sex == undefined || sex == "") {
alert("性別:格式不正確");
return;
}
if(dates == undefined || dates == "") {
alert("生日:格式不正確");
return;
}
//新增到陣列
$scope.users.push({
name: name,
sex: sex,
dates: dates,
addr: pro + "-" + city
})
}
//4.單個刪除
$scope.del = function(index) {
var flag = confirm("是否確定刪除");
if (flag) {
$scope.users.splice(index, 1);
alert("刪除成功");
}
}
//5.全選/全不選
$scope.changeCheck=function () {
for (var i = 0; i < $scope.users.length; i++) {
$scope.users[i].check=$scope.ischeck;
}
}
//6.批量刪除
$scope.delAll=function () {
for (var i = 0; i < $scope.users.length; i++) {
if ($scope.users[i].check) {
$scope.users.splice(i,1);
i--;
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl" style="width: 800px;">
姓名:<input type="text" ng-model="name" /> 性別:
<select ng-model="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
生日:<input type="date" ng-model="dates" /> 住址:
<select ng-model="sel_province" ng-options="pro.province for pro in addr" ng-change="changePro()"></select>
<select ng-model="sel_city" ng-options="cty.city for cty in sel_province.citys"></select>
<button ng-click="add()" style="background-color: greenyellow;">新增</button><br />
<button ng-click="delAll()" style="background-color: red;float: right;">批量刪除</button>
<table border="1px" cellspacing="0" cellpadding="0" width="800px">
<tr style="background-color: grey;">
<td><input type="checkbox" ng-model="ischeck" ng-change="changeCheck()" /></td>
<td>姓名</td>
<td><button ng-click="px='sex';sj=!sj">排序</button>性別</td>
<td>生日</td>
<td>住址</td>
<td>刪除</td>
</tr>
<tr ng-repeat="s in users|orderBy:px:sj">
<td><input type="checkbox" ng-model="s.check" /></td>
<td>{{s.name}}</td>
<td>{{s.sex}}</td>
<td>{{s.dates|date:"yyyy-MM-dd"}}</td>
<td>{{s.addr}}</td>
<td><button ng-click="del($index)">刪除</button></td>
</tr>
</table>
</body>
</html>