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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
wxPython实现分隔窗口
2019/11/19 Python
简单了解python元组tuple相关原理
2019/12/02 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Python正则表达式如何匹配中文
2020/05/27 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Python之字典对象的几种创建方法
2020/09/30 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
关于运动会广播稿300字
2014/10/05 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
采购内勤岗位职责
2015/04/13 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis