文章标题

最新推荐文章于 2022-06-12 17:07:04 发布
最新推荐文章于 2022-06-12 17:07:04 发布
阅读量187 收藏
点赞数 1
分类专栏： AngularJS 文章标签： 省市区三级联动下拉列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaoxiaoxin/article/details/50984353
版权

本人刚学习AngularJS,同时在工作中也遇到了用AngularJS制作省市区三级联动下拉列表，为了更好的学习和巩固AngularJS以及方便自己以后查阅，所以自己又重新写了一遍，把它分享出来，同时也为刚学习AngularJS的新人提供一定的参考。

由于代码中的省市区比较长，所以AngularJS相应的代码在最底部

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    var myModule = angular.module('myModule',[]);
    myModule.controller('myctrl',function($scope){
        $scope.regionData = [
        {
      "id": "110000",
      "parentId": null,
      "text": "北京市",
      "children": [
        {
          "id": "110100",
          "parentId": null,
          "text": "市辖区",
          "children": [
            {
              "id": "110101",
              "parentId": null,
              "text": "东城区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110102",
              "parentId": null,
              "text": "西城区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110103",
              "parentId": null,
              "text": "崇文区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110104",
              "parentId": null,
              "text": "宣武区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110105",
              "parentId": null,
              "text": "朝阳区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110106",
              "parentId": null,
              "text": "丰台区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110107",
              "parentId": null,
              "text": "石景山区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110108",
              "parentId": null,
              "text": "海淀区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110109",
              "parentId": null,
              "text": "门头沟区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110111",
              "parentId": null,
              "text": "房山区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110112",
              "parentId": null,
              "text": "通州区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110113",
              "parentId": null,
              "text": "顺义区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110114",
              "parentId": null,
              "text": "昌平区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110115",
              "parentId": null,
              "text": "大兴区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110116",
              "parentId": null,
              "text": "怀柔区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110117",
              "parentId": null,
              "text": "平谷区",
              "children": [

              ],
              "statNum": 0
            }
          ],
          "statNum": 0
        },
        {
          "id": "110200",
          "parentId": null,
          "text": "县",
          "children": [
            {
              "id": "110228",
              "parentId": null,
              "text": "密云县",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "110229",
              "parentId": null,
              "text": "延庆县",
              "children": [

              ],
              "statNum": 0
            }
          ],
          "statNum": 0
        }
      ],
      "statNum": 0
            },
            {
      "id": "120000",
      "parentId": null,
      "text": "天津市",
      "children": [
        {
          "id": "120100",
          "parentId": null,
          "text": "市辖区",
          "children": [
            {
              "id": "120101",
              "parentId": null,
              "text": "和平区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120102",
              "parentId": null,
              "text": "河东区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120103",
              "parentId": null,
              "text": "河西区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120104",
              "parentId": null,
              "text": "南开区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120105",
              "parentId": null,
              "text": "河北区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120106",
              "parentId": null,
              "text": "红桥区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120107",
              "parentId": null,
              "text": "塘沽区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120108",
              "parentId": null,
              "text": "汉沽区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120109",
              "parentId": null,
              "text": "大港区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120110",
              "parentId": null,
              "text": "东丽区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120111",
              "parentId": null,
              "text": "西青区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120112",
              "parentId": null,
              "text": "津南区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120113",
              "parentId": null,
              "text": "北辰区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120114",
              "parentId": null,
              "text": "武清区",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120115",
              "parentId": null,
              "text": "宝坻区",
              "children": [

              ],
              "statNum": 0
            }
          ],
          "statNum": 0
        },
        {
          "id": "120200",
          "parentId": null,
          "text": "县",
          "children": [
            {
              "id": "120221",
              "parentId": null,
              "text": "宁河县",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120223",
              "parentId": null,
              "text": "静海县",
              "children": [

              ],
              "statNum": 0
            },
            {
              "id": "120225",
              "parentId": null,
              "text": "蓟　县",
              "children": [

              ],
              "statNum": 0
            }
          ],
          "statNum": 0
        }
      ]}];
        $scope.citys = [];
        $scope.districts = [];
        $scope.regionText = {};
        $scope.$watch('selectedProvince',function(newValue,oldValue){
            //debugger;
            console.log(newValue,oldValue);
            if(newValue != oldValue){
                var i = 0;len = $scope.regionData.length;
                if(!newValue){ //判断选择的是否选择省份，如果没有省，则重置市区
                    $scope.citys = [];
                    $scope.districts = [];
                    return;
                }
                for(i;i < len;i ++){
                    if($scope.regionData[i].id == $scope.selectedProvince){
                        $scope.citys = $scope.regionData[i].children;
                        $scope.regionText.selectedProvinceText = $scope.regionData[i].text;
                        /*根据需求可以选择获取省市区的编码值*/
                        console.log('省名',$scope.regionText.selectedProvinceText);
                    }
                }
                $scope.districts = [];
            }
        });

        $scope.$watch('selectedCity',function(newValue,oldValue){
            //debugger;
            if(newValue != oldValue){
                if(!newValue){ //作用同上
                    $scope.districts = [];
                    return;
                }
                var i = 0;len = $scope.citys.length;
                for(i;i < len; i ++){
                    if($scope.citys[i].id == $scope.selectedCity){
                        $scope.districts = $scope.citys[i].children;
                        $scope.regionText.selectedCityText = $scope.citys[i].text;
                        console.log('市名',$scope.regionText.selectedCityText);
                    }
                }
            }
        });
        $scope.$watch('selectedDstrict',function(newValue,oldValue){
            if(newValue != oldValue){
                var i = 0; len = $scope.districts.length;
                for(i;i < len ; i ++){
                    if($scope.districts[i].id == $scope.selectedDstrict){
                        $scope.regionText.selectedDistrictText = $scope.districts[i].text;
                        console.log('区名',$scope.regionText.selectedDistrictText);
                    }
                }
            }
        });
    });
</script>
</head>
<body>

<div ng-controller="myctrl">
    <select required="" class="form-control" ng-model="selectedProvince" ng-options="item.id as item.text for item in regionData">  
        <option value="">省</option>  
    </select>  
    <select class="form-control" ng-model="selectedCity" ng-options="item.id as item.text for item in citys">  
        <option value="">市</option>  
    </select>  
    <select class="form-control" ng-model="selectedDstrict" ng-options="item.id as item.text for item in districts">  
        <option value="">区</option>  
    </select>  
</div>

</body>
</html>
廖小新
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python爬虫爬取微信公众号的阅读数、喜爱数、文章标题和链接等信息
weixin_46569877的博客
08-04 1万+
python爬取微信公众号
Java爬虫之爬取多篇含有关键词的文章标题和内容
hell_orld的博客
11-19 2243
Java爬虫之爬取多篇含有关键词的文章标题和内容实现的功能需要用到的jar包需要对html一些标签有一定的了解代码设计思想源代码 实现的功能 该代码针对维科网写的爬虫，具体如果想写其它的可以照着这篇模仿来写！ 输入想要搜索的关键字和输入关键字后的前几页页数（即输入关键字后跳转的网页的页数，如下图） 将包含关键字的文章标题和内容提取出来保存在一个txt文件里面（如下图，输入关键词为智能，前2页） 需要用到的jar包 获取文章信息需要的包：Jsoup； 需要对html一些标签有一定的了解 可以到w3cs
js 省市县三级级联
okttl01的专栏
06-17 4549
选择省份 选择城市 选择区县 /** * 在appr.js 前的html 中定义 */ //定义当前页面初始化值 var selectedProvince = "${province}"; var selectedCity = "${city}"; var selectedCounty = "${county}"; appr.js
使用POI生成文章标题
Cloud的专栏
09-24 7919
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
dedecms调用文章标题不能全部显示
我不晓得
05-17 2227
1、进入后台–系统–系统设置–系统基本参数–其他选项–文档标题最大程度改为你要的长度原默认是60（这里改为了200） 2、登陆数据库，改数据库表dede_archives表里面的title字段，原默认是60，（这里改为200）. 解决dedecms UTF-8首页文章标题显示字数太短的办法 原因分析：因为UTF-8编码1个中文汉字占用的是3个字节，GBK占用的是2个字节，所以...
火车头插件：根据文章标题生成图片；标题生成相关配图
qq_26057339的博客
05-12 1839
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图； 插件售价200；不限制ip,不限域名。一次购买终身使用。 没有第三方接口的调用不用担心插件失效。 插件效果： 插件优势： 用户可以自定义文字的颜色 用户可以自定义文字的大小 用户可以自定义图片背景 用户可以自定义图片格式 用户可以自定义图片储存的目录 用户可以自定义图片在文章哪个位置插入 插件分为 火车头插件和服务器接口： 服务器接口负责处理图片和储存图片； 火车头插件处理文章内容 服务器插件有运行环境要求 php 版本低于
如何利用Python爬虫爬取博主的全部文章的标题，文章标题的URL。可根据阅读量进行降序输出！
HWP
12-21 3867
步履艰辛呀！自己不会做网络爬虫，只好去找教程例子！ 当然自己也是有点小基础的！只是会读取简单的HTML网页代码！ 对于这么复杂的代码，驾驭不住呦~ 多个代码类型。我会分别列取出来的。 如果是代码的原作者，看到请联系我。我会标明来源地址的！ 前言： 但是无论是谁的主页，都会出现这个人的主页。 已经有好多人都爬取到啦！ 我爬取的所有链接的部分链接： 但是，这个链接：https://blog.csdn...
标题生成图片插件(火车头采集器：根据文章标题生成相关图片)
qq_26057339的博客
06-12 1297
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图；根据标题生成图片,文章页自动配标题配图,避免版权问题 插件分为 火车头插件和服务器接口： 下载地址：https://xiaowangtx.cn/post/54.html......
Wordpress自定义函数控制文章标题长度
09-29
在WordPress中，文章标题的展示方式对于网站的整体布局和用户体验起着至关重要的作用。当文章标题过长时，可能会导致页面布局混乱或者视觉效果不佳，尤其是标题在首页以列表形式展示时。为了解决这个问题，我们可以...
PHPCMS内容页文章标题添加页码的方法教程
09-29
为了使***S内容页的文章标题更具个性化并带有页码，提高网页体验和SEO效果，需要进行一系列的代码修改。具体的做法是在标题中加入页码信息，从而让每个页面的标题都具有唯一性。比如，针对PHPCMS生成的内容页，可以...
wordpress文章标题为空时其它内容代替的方法
09-29
在WordPress内容管理系统中，文章标题通常扮演着至关重要的角色，它不仅为用户提供文章的概览，也是搜索引擎优化（SEO）的关键元素。然而，在某些特定情况下，用户可能希望发布无标题的文章，例如个人心情记录或状态...
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
python爬虫之爬取多篇含有关键词的文章标题和内容优化
hell_orld的博客
09-15 3636
python爬虫之爬取多篇含有关键词的文章标题和内容优化需要和前篇联系起来实现的功能代码设计思想源代码 需要和前篇联系起来 python爬虫之爬取多篇含有关键词的文章标题和内容 实现的功能 爬取多个关键字的文章标题和内容（将要爬取的关键词放在一个数组中，通过for进行遍历），并且每个关键字创建一个文件夹，每篇文章放在独自一个txt文件里面，运行结果（自己调试时，只设置页面为2，数组为两个）： 代码设计思想 可以观看前面那篇python爬虫之爬取多篇含有关键词的文章标题和内容 ，因为这篇代码是对上一篇的
weixin011医院核酸检测服务系统开发+Springboot.zip
08-23
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对医院核酸检测信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用医院核酸检测服务系统可以有效管理，使信息管理能够更加科学和规范。 医院核酸检测服务系统在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理员管理医护人员和普通管理员，管理检测进度和接种进度，审核检测订单和接种订单。普通管理员负责管理疫苗接种和核酸检测信息的管理，审核接种订单和检测订单。 总之，医院核酸检测服务系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
weixin206校园顺路代送微信小程序ssm.zip
最新发布
08-23
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本校园顺路代送微信小程序就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此校园顺路代送微信小程序利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。校园顺路代送微信小程序管理员有个人中心，用户管理，发布者管理，代送类型管理，代送任务管理，任务接取管理，任务取消管理，系统消息管理，意见反馈，系统管理。发布者和用户都可以注册登录，发布者主要发布代送任务和任务取消操作，用户可以选择接受发布者的任务，并且可以反馈。校园顺路代送微信小程序的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。
美世2024年全球人才趋势–亚洲篇.pdf
08-23
【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚洲篇.pdf【美世】2024年全球人才趋势–亚
wordpress 改写文章标题
03-20
您可以使用以下代码来改写 WordPress 文章标题： function custom_title( $title ) { $new_title = '新标题'; return $new_title; } add_filter( 'the_title', 'custom_title' ); 将“新标题”替换为您想要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

廖小新

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值