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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
javascript高亮效果的二种实现方法
Sep 14 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python 实现登录网页的操作方法
2018/05/11 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python实现井字棋小游戏
2020/03/09 Python
python opencv实现简易画图板
2020/08/27 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
工作中个人的自我评价
2013/12/31 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2014年技术员工作总结
2014/11/18 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
python Tkinter模块使用方法详解
2022/04/07 Python
python运行脚本文件的三种方法实例
2022/06/25 Python