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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
JS实现分页导航效果
Feb 19 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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
星际流派综述
2020/03/04 星际争霸
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
全面理解闭包机制
2016/07/11 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
原生js实现3D轮播图
2020/03/21 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python的re正则表达式实例代码
2018/01/24 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
品牌推广策划方案
2014/05/28 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript