2級聯動
阿新 • • 發佈：2018-12-10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
// 準備資料來源
$scope.good = [
{"id":"001","name":"羅馬皮鞋 ","price":"100","num":"10","address":"北京"},
{"id":"003","name":"oppoR15","price":"2599","num":"10","address":"廣州"},
{"id":"004","name":"vivoX20","price":"3000","num":"2","address":"深圳"}];
// 全選的屬性
$scope.checkall = false;
// 新增功能區域
$scope.addIsShow = false;
$scope.newname;
$scope.newhobby;
$scope.select2;
$scope.addNewGood = function(){
// 隨機數作為id
var n = Math.round(Math.random()*1000);
// 建立新商品物件,屬性賦值
var a = {};
a.id = n;
a.name = $scope.newname;
a.price = $scope.newprice;
a.num = $scope.newnum;
a.address = $scope.select2.name;
// 新增到陣列
$scope.good.push(a);
alert(a.address);
$scope.addIsShow = false;
}
// 批量刪除
$scope.deleteMore = function(){
// 獲取所有選擇的checkbox
var cks = $(":checkbox:checked");
for (var i = 0; i < cks.length; i++) {
var ck = cks[i];
var _id = ck.value;
for (var j = 0; j < $scope.good.length; j++) {
if ($scope.good[j].id == _id) {
$scope.good.splice(j,1);
break;
}
}
}
}
//省市區資料來源
$scope.proList =[
{
"amode":"河南",
"citys":[
{"name":"鄭州",
"area":[{"aname":"鄭1區"},{"aname":"鄭2區"}]
},
{"name":"開封",
"area":[{"aname":"開1區"},{"aname":"開2區"}]
}
]
},
{
"amode":"河北",
"citys":[
{"name":"石家莊",
"area":[{"aname":"石1區"},{"aname":"石2區"}]
},
{"name":"邯鄲",
"area":[{"aname":"邯1區"},{"aname":"邯2區"}]
}
]
}
];
//新增省改變事件
$scope.proChange = function(){
$scope.select2 = $scope.select1.citys[0];
};
});
/*姓名非空，只能由字母和數字構成，長度6-12個字元*/
$(function() {
$("#_name").blur(function() { //使用者名稱文字框失去焦點觸發驗證事件
if($("#_name").val() == "") //只處驗證不能為空並且只能為英文或者數字或者下劃線組成的２－１５個字元
{
alert("使用者名稱不能為空");
}
});
$("#_price").blur(function() {
var a = $("#_price").val();
if(a < 0)
{
alert("價格必須大於0");
}
});
$("#_num").blur(function() {
var a = $("#_num").val();
if(a < 0)
{
alert("數量必須大於0");
}
});
});
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.one{
text-align: left;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table align="center">
<center>
<input type="button" value="批量刪除" ng-click="deleteMore();" /><br />
<!--姓名非空，只能由字母和數字構成，長度6-12個字元-->
<table align="center" >
<tr align="center">
<td>
名字:
</td>
<td>
<input type="text" ng-model="newname" id="_name" />
</td>
</tr>
<tr align="center">
<td>
價格:
</td>
<td>
<input type="text" ng-model="newprice" id="_price" />
</td>
</tr>
<tr align="center">
<td>
數量:
</td>
<td>
<input type="text" ng-model="newnum" id="_num" />
</td>
</tr>
<tr align="center">
<td>
籍貫:
</td>
<td>
<select style="width: 150px;"
ng-init="select1=proList[0]"
ng-model="select1"
ng-change="proChange();"
ng-options="item.amode for item in proList" ></select>
<select style="width: 150px;"
ng-model="select2"
ng-init="select2=select1.citys[0]"
ng-options="data1.name for data1 in select1.citys">
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="新增" ng-click="addNewGood();" id="zhuce" />
</td>
</tr>
</table>
<table width="500px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" align="center">
<tr style="background-color: grey;">
<td>
<input type="checkbox" ng-model="checkall" />
</td>
<td>商品名稱</td>
<td>商品價格</td>
<td>商品數量</td>
<td>庫存商品總計</td>
<td>發貨地址</td>
</tr>
<tr ng-repeat="p in good" class="{{$index%2 == 0?'red':'green'}}">
<td>
<input type="checkbox" value="{{p.id}}" ng-model="checkall" />
</td>
<td>
{{p.name}}
</td>
<td>
{{p.price}}
</td>
<td>
{{p.num}}
</td>
<td>
{{p.num*p.price}}
</td>
<td>
{{p.address}}
</td>
</tr>
</table>
</center>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
// 準備資料來源
$scope.good = [
{"id":"001","name":"羅馬皮鞋 ","price":"100","num":"10","address":"北京"},
{"id":"003","name":"oppoR15","price":"2599","num":"10","address":"廣州"},
{"id":"004","name":"vivoX20","price":"3000","num":"2","address":"深圳"}];
// 全選的屬性
$scope.checkall = false;
// 新增功能區域
$scope.addIsShow = false;
$scope.newname;
$scope.newhobby;
$scope.select2;
$scope.addNewGood = function(){
// 隨機數作為id
var n = Math.round(Math.random()*1000);
// 建立新商品物件,屬性賦值
var a = {};
a.id = n;
a.name = $scope.newname;
a.price = $scope.newprice;
a.num = $scope.newnum;
a.address = $scope.select2.name;
// 新增到陣列
$scope.good.push(a);
alert(a.address);
$scope.addIsShow = false;
}
// 批量刪除
$scope.deleteMore = function(){
// 獲取所有選擇的checkbox
var cks = $(":checkbox:checked");
for (var i = 0; i < cks.length; i++) {
var ck = cks[i];
var _id = ck.value;
for (var j = 0; j < $scope.good.length; j++) {
if ($scope.good[j].id == _id) {
$scope.good.splice(j,1);
break;
}
}
}
}
//省市區資料來源
$scope.proList =[
{
"amode":"河南",
"citys":[
{"name":"鄭州",
"area":[{"aname":"鄭1區"},{"aname":"鄭2區"}]
},
{"name":"開封",
"area":[{"aname":"開1區"},{"aname":"開2區"}]
}
]
},
{
"amode":"河北",
"citys":[
{"name":"石家莊",
"area":[{"aname":"石1區"},{"aname":"石2區"}]
},
{"name":"邯鄲",
"area":[{"aname":"邯1區"},{"aname":"邯2區"}]
}
]
}
];
//新增省改變事件
$scope.proChange = function(){
$scope.select2 = $scope.select1.citys[0];
};
});
/*姓名非空，只能由字母和數字構成，長度6-12個字元*/
$(function() {
$("#_name").blur(function() { //使用者名稱文字框失去焦點觸發驗證事件
if($("#_name").val() == "") //只處驗證不能為空並且只能為英文或者數字或者下劃線組成的２－１５個字元
{
alert("使用者名稱不能為空");
}
});
$("#_price").blur(function() {
var a = $("#_price").val();
if(a < 0)
{
alert("價格必須大於0");
}
});
$("#_num").blur(function() {
var a = $("#_num").val();
if(a < 0)
{
alert("數量必須大於0");
}
});
});
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.one{
text-align: left;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table align="center">
<center>
<input type="button" value="批量刪除" ng-click="deleteMore();" /><br />
<!--姓名非空，只能由字母和數字構成，長度6-12個字元-->
<table align="center" >
<tr align="center">
<td>
名字:
</td>
<td>
<input type="text" ng-model="newname" id="_name" />
</td>
</tr>
<tr align="center">
<td>
價格:
</td>
<td>
<input type="text" ng-model="newprice" id="_price" />
</td>
</tr>
<tr align="center">
<td>
數量:
</td>
<td>
<input type="text" ng-model="newnum" id="_num" />
</td>
</tr>
<tr align="center">
<td>
籍貫:
</td>
<td>
<select style="width: 150px;"
ng-init="select1=proList[0]"
ng-model="select1"
ng-change="proChange();"
ng-options="item.amode for item in proList" ></select>
<select style="width: 150px;"
ng-model="select2"
ng-init="select2=select1.citys[0]"
ng-options="data1.name for data1 in select1.citys">
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="新增" ng-click="addNewGood();" id="zhuce" />
</td>
</tr>
</table>
<table width="500px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" align="center">
<tr style="background-color: grey;">
<td>
<input type="checkbox" ng-model="checkall" />
</td>
<td>商品名稱</td>
<td>商品價格</td>
<td>商品數量</td>
<td>庫存商品總計</td>
<td>發貨地址</td>
</tr>
<tr ng-repeat="p in good" class="{{$index%2 == 0?'red':'green'}}">
<td>
<input type="checkbox" value="{{p.id}}" ng-model="checkall" />
</td>
<td>
{{p.name}}
</td>
<td>
{{p.price}}
</td>
<td>
{{p.num}}
</td>
<td>
{{p.num*p.price}}
</td>
<td>
{{p.address}}
</td>
</tr>
</table>
</center>
</table>
</body>
</html>