//二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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.proList =[
{
"pname":"河南",
"citys":[
{"name":"郑州",
"area":[{"aname":"郑1区"},{"aname":"郑2区"}]
},
{"name":"开封",
"area":[{"aname":"开1区"},{"aname":"开2区"}]
}
]
},
{
"pname":"河北",
"citys":[
{"name":"石家庄",
"area":[{"aname":"石1区"},{"aname":"石2区"}]
},
{"name":"邯郸",
"area":[{"aname":"邯1区"},{"aname":"邯2区"}]
}
]
}
];
//省改变事件的回调函数//省改变了，同时联动改变 城市和区
$scope.proChange = function(){
$scope.select2 = $scope.select1.citys[0];
$scope.select3 = $scope.select2.area[0];
}
//城市改变了，同时联动改变区
$scope.cityChange = function(){
$scope.select3 = $scope.select2.area[0];
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="select1"
ng-options="item.pname for item in proList"
ng-init="select1=proList[0]"
ng-change="proChange();"
></select>
<select ng-model="select2"
ng-options="data1.name for data1 in select1.citys"
ng-init="select2=select1.citys[0]"
ng-change="cityChange();"
></select>
<select ng-model="select3"
ng-options="data3.aname for data3 in select2.area"
ng-init="select3=select2.area[0]"
></select>
</body>
</html>
<!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" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods = [
{"id":"201","name":"MacPro","sex":10000,"sr":"蒙牛","zz":"5"},
{"id":"202","name":"iPhoneX","sex":8000,"sr":"老北京","zz":"5"},
{"id":"203","name":"小米7","sex":4999,"sr":"麒麟","zz":"5"},
{"id":"204","name":"华为P10","sex":2999,"sr":"百事","zz":"5"}];
//数据源,省列表
$scope.proList =[
{
"pname":"北京",
"citys":[
{"name":"西二旗"
},
{"name":"西三旗"
}
]
},
{
"pname":"郑州",
"citys":[
{"name":"二七区"
},
{"name":"新郑市"
}
]
},
{
"pname":"南京",
"citys":[
{"name":"南开区"
},
{"name":"中山市"
}
]
}
];
//数据源,省列表
$scope.sexList =[
{
"psex":"男"
},
{
"psex":"女"
}
];
//省改变事件的回调函数//省改变了，同时联动改变 城市和区
$scope.proChange = function(){
$scope.select2 = $scope.select1.citys[0];
}
$scope.deletGoodsById=function(_id){
if(confirm("您确认删除吗?")){
for (g in $scope.goods) {
if($scope.goods[g].id==_id){
$scope.goods.splice(g,1)
}
}
}
};
/*//复选框全选反选
$scope.checkall = false;
$scope.selectAllFun = function() {
if($scope.checkall) {
for(index in $scope.goods) {
$scope.goods[index].state = true;
}
} else {
for(index in $scope.goods) {
$scope.goods[index].state = false;
}
}
}*/
//全选反选
$scope.nockeckAll=function(){
$scope.checkall = !$scope.checkall;
};
//添加功能区域
$scope.addIsShow = true;
$scope.newname;
$scope.newsex;
$scope.newsr;
$scope.select1;
$scope.select2;
$scope.addNewGood = function(){
var n = Math.round(Math.random()*100);//随机数作为id
//创建新商品对象,属性赋值
var a = {};
a.id = n;
a.name = $scope.newname;
a.sex = $scope.newsex.psex;
a.sr = $scope.newsr;
a.zz= $scope.select1.pname+"--"+ $scope.select2.name;
//添加到数组
$scope.goods.push(a);
}
$scope.deleteMore=function(){
var arr = $(":checkbox:checked")
if(arr.length>0){
if(confirm("您确定要删除吗?")){
arr.each(function(){
var _id = $(this).prop("title");
for (g in $scope.goods) {
if($scope.goods[g].id==_id){
$scope.goods.splice(g,1)
}
}
})
}
}else{
alert("请您勾选数据!")
}
}
})
function yanname() {
if(document.getElementById("nameId").value.length>30||document.getElementById("nameId").value.length<4){
alert("用户名不小于3个字符且不大于30个字符");
}
if(document.getElementById("srId").value==""){
alert("不能为空");
}
}
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color:beige;
}
.green{
background-color: greenyellow;
}
</style>
<style type="text/css">
.td1{
background-color: yellow;
}
.td2{
background-color: null;
}
input{
border-radius:15px;
}
</style>
</head>
<center>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show="addIsShow">
姓名：<input id="nameId" type="text" ng-model="newname" />
性别：<select ng-model="newsex"
ng-options="item.psex for item in sexList"
ng-init="newsex=sexList[0]"
></select>
生日：<input id="srId" type="text" ng-model="newsr" />
住址：<select ng-model="select1"
ng-options="item.pname for item in proList"
ng-init="select1=proList[0]"
ng-change="proChange();"
></select>
<select ng-model="select2"
ng-options="data1.name for data1 in select1.citys"
ng-init="select2=select1.citys[0]"
></select>
<input οnclick="yanname()" style="background-color:#99FF00 ;" type="button" value="添加" ng-click="addNewGood();" /><br />
</div>
<input style="background-color:#FFFF00 ;" type="button" value="全选/反选" ng-click="nockeckAll()"/>
<input style="text-align: right; background-color: red;" type="button" value="批量删除" ng-click="deleteMore();"/>
<table width="800px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
<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="g in goods | filter:searchKey | orderBy:orderByKey" class="{{$index%2==0?'red':'green'}}">
<td><input type="checkbox" value="{{g.id}}" ng-model="checkall" title="{{g.id}}" /></td>
<td>{{g.name}}</td>
<td>{{g.sex}}</td>
<td>{{g.sr}}</td>
<td>{{g.zz}}</td>
<td>
<input type="button" value="删除" ng-click="deletGoodsById(g.id);"/>
</td>
</tr>
</table>
</body>
</center>
</html>
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
