AngularJS实现的省市二级联动功能示例【可对选项实现增删】


Posted in Javascript onOctober 26, 2017

本文实例讲述了AngularJS实现的省市二级联动功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>3water.com 省市二级联动</title>
</head>
<style>
 *{
  margin:0;
  padding:0;
 }
 .ul{
  list-style:none;
  display:inline-block;
 }
 .selectOption ul li{
  display:inline-block;
  width:50px;
  padding:5px;
 }
 ul li:hover{
  background-color:#59C0F3;
  color:#fff;
  cursor:pointer;
 }
 .container{
  display:inline-block;
 }
 dl{
  display: inline-block;
 }
 dl dt{
  display: inline-block;
 }
 .container{
  position:relative;
  text-align: left;
  vertical-align:top;
 }
 .selectBoder{
  width:150px;
  height:20px;
  margin:0 auto;
  margin-bottom:5px;
  cursor:pointer;
  border:1px solid #808080;
  padding:2px 5px;
  font-size:14px;
 }
 .selectBoder:hover{
  border-color:#59C0F3;
 }
 .selectOption:before{
  width: 0;
  height: 0;
  border-bottom: 50px solid #ffffff;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
 }
 .selectOption{
  font-size:14px;
  position:absolute;
  background-color: #ffffff;
  z-index:9999;
  border:1px solid #eee;
  width:360px;
  padding:3px 5px;
  box-shadow: 5px 5px 10px #888888;
 }
 .button{
  width:30px;
  height:30px;
  display: inline-block;
  background-color:#59C0F3;
  text-align:center;
  line-height: 25px;
  cursor:pointer;
  font-size:24px;
  color:#fff;
  margin:0 5px;
  border-radius:30px;
 }
 .button:hover{
  background-color:#12bb16;
 }
</style>
<body ng-app="myApp" ng-controller="myControl">
<div class="inline" ng-repeat = "option in options">
<div class="container">
 <dl>
  <dd class="selectBoder" ng-click="choseP($index)" ng-value="false">{{option.province}}</dd>
  <dt class="selectOption" ng-if="option.ifShowProvince" ng-mouseleave="leaveProvince(option)">
  <ul>
   <li ng-repeat = " x in province" ng-value="x.value" ng-click="choseProvince($event.target,option)" data-name="{{x.name}}">{{x.name}}</li>
  </ul>
  </dt>
 </dl>
</div>
<div class="container">
 <dl>
  <dd class="selectBoder" ng-click="choseC($index)" ng-value="false">{{option.city}}</dd>
  <dt class="selectOption" ng-if="option.ifShowCity" ng-mouseleave="leaveCity(option)">
  <ul>
   <li ng-repeat = "y in option.cities" ng-value="y.value" ng-click="choseCity($event.target,option)" data-name="{{y.name}}">{{y.name}}</li>
  </ul>
  </dt>
 </dl>
</div>
  <span class="button" ng-click="addChose($index)">+</span>
 <span class="button" ng-click="deleteChose($index)">-</span>
</div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
 var app = angular.module('myApp',[]);
 app.controller('myControl',function($scope){
  $scope.ifShowCity = false;
  $scope.ifShowProvince = false;
  $scope.options =[{index:"0",ifShowCity:false,ifShowProvince:false,province:"",city:"",cities:""}];
  $scope.leaveProvince = function(option){
   $.each($scope.options,function(index,item){
    if(option == $scope.options[index]){
     $scope.optionIndex = index;
    }
   })
   $scope.options[$scope.optionIndex].ifShowProvince = false;
  }
  $scope.leaveCity = function(option){
   $.each($scope.options,function(index,item){
    if(option == $scope.options[index]){
     $scope.optionIndex = index;
    }
   })
   $scope.options[$scope.optionIndex].ifShowCity = false;
  }
  $scope.choseProvince = function(target,option){
   $.each($scope.options,function(index,item){
    if(option == $scope.options[index]){
     $scope.optionIndex = index;
    }
   })
   $scope.options[$scope.optionIndex].ifShowProvince = false;
   $scope.options[$scope.optionIndex].province = target.getAttribute("data-name");
   $.each($scope.province,function(index,item){
    if(item.value == target.getAttribute("value")){
     $scope.options[$scope.optionIndex].cities = item.children;
     }
    }
   )
  }
  $scope.choseCity = function(target,option){
   $.each($scope.options,function(index,item){
    if(option == $scope.options[index]){
     $scope.optionIndex = index;
    }
   })
   $scope.options[$scope.optionIndex].ifShowCity = false;
   $scope.options[$scope.optionIndex].city = target.getAttribute("data-name");
  }
  function getPrarms(){
   return $scope.options;
  }
  $scope.sub = function(){
   getPrarms();
  }
  $scope.province =
    [{
   name: "湖北省",
   value: "01",
   children: [{
    name: "武汉",
    value: "0101"
   }, {
    name: "黄冈",
    value: "0102"
   }, {
    name: "荆州",
    value: "0103"
   }, {
    name: "十堰",
    value: "0104"
   }, {
    name: "黄石",
    value: "0105"
   }, {
    name: "鄂州",
    value: "0106"
   }, {
    name: "咸宁市",
    value: "0107"
   }, {
    name: "襄阳市",
    value: "0108"
   }
   ]
  },{
   name: "广东省",
   value: "02",
   children: [{
    name: "广东",
    value: "0201"
   }, {
    name: "深圳",
    value: "0202"
   }, {
    name: "佛山",
    value: "0203"
   }, {
    name: "惠州",
    value: "0204"
   }, {
    name: "东莞",
    value: "0205"
   }]
   },{
    name: "河北省",
    value: "03",
    children: [{
     name: "北京",
     value: "0301"
    }, {
     name: "邯郸",
     value: "0302"
    }, {
     name: "邢台",
     value: "0303"
    }, {
     name: "保定",
     value: "0304"
    }, {
     name: "秦皇岛",
     value: "0305"
    }
    ]}
     ]
  $scope.choseP = function($index){
   $scope.options[$index].ifShowProvince = !$scope.options[$index].ifShowProvince;
   $scope.options[$index].ifShowCity = false;
  }
  $scope.choseC = function($index){
   $scope.options[$index].ifShowCity = !$scope.options[$index].ifShowCity;
   $scope.options[$index].ifShowProvince = false;
  }
  $scope.addChose = function($index){
   if($scope.options.length < 10){
    $scope.options.splice($scope.options.length,0,{ //从最后面添加内容
     index:$scope.options.length,ifShowCity:false,ifShowProvince:false
    });
    $scope.canDelete = true;
   }else{
    $scope.canAdd = false;
   }
  }
  $scope.deleteChose = function($index){
   if($scope.options.length >1){
    $scope.options.splice($index,1); //从当前行删除。
   }
   if($index == 1){
    $scope.canDelete = false;
   }
  }
 });
</script>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 #Javascript
js 只比较时间大小的实例
Oct 26 #Javascript
基于Require.js使用方法(总结)
Oct 26 #Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 #Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 #Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 #Javascript
js插件实现图片滑动验证码
Sep 29 #Javascript
You might like
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
$()JS小技巧
2007/07/21 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
vue实现图片上传功能
2020/05/28 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python列表去重的二种方法
2014/02/14 Python
python迭代器实例简析
2014/09/25 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python next()和iter()函数原理解析
2020/02/07 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
给老师的感谢信
2015/01/20 职场文书
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android