编程 Javascript

AngularJS实现的select二级联动下拉菜单功能示例

Posted in Javascript onOctober 25, 2017

本文实例讲述了AngularJS实现的select二级联动下拉菜单功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html ng-app>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<script src="../script/angular.js"></script>
<body ng-controller="Controller">
<div>所属分类：
  <select ng-model="selected1" ng-options="m.roleName for m in classification1" ng-change="changeClassification(selected1)">
    <option value="">-- 请选择 --</option>
  </select>
  <select ng-model="selected2" ng-options="m.roleName for m in classification2">
    <option value="">-- 请选择 --</option>
  </select>
</div>
</body>
<script>
  var contantCroleList = [
    { "roleName" : "软件开发", "roleId" : "role1", "children" : [
      { "roleName" : "软件AAA", "roleId" : "role11", "children" : [] },
      { "roleName" : "软件BBB", "roleId" : "role12", "children" : []},
      { "roleName" : "软件CCC", "roleId" : "role12", "children" : []},
      { "roleName" : "软件DDD", "roleId" : "role12", "children" : []},
      { "roleName" : "软件EEE", "roleId" : "role12", "children" : []},
      { "roleName" : "软件FFF", "roleId" : "role12", "children" : []}
    ]},
    { "roleName" : "硬件开发", "roleId" : "role2", "children" : [
      { "roleName" : "硬件AAA", "roleId" : "role21", "children" : [] },
      { "roleName" : "硬件BBB", "roleId" : "role22", "children" : []},
      { "roleName" : "硬件CCC", "roleId" : "role23", "children" : []},
      { "roleName" : "硬件DDD", "roleId" : "role24", "children" : []},
      { "roleName" : "硬件EEE", "roleId" : "role25", "children" : []},
      { "roleName" : "硬件FFF", "roleId" : "role26", "children" : []}
    ]},
    { "roleName" : "嵌入式开发", "roleId" : "role3", "children" : [
      { "roleName" : "嵌入式AAA", "roleId" : "role31", "children" : [] },
      { "roleName" : "嵌入式BBB", "roleId" : "role32", "children" : []},
      { "roleName" : "嵌入式CCC", "roleId" : "role33", "children" : []},
      { "roleName" : "嵌入式DDD", "roleId" : "role34", "children" : []},
      { "roleName" : "嵌入式EEE", "roleId" : "role35", "children" : []},
      { "roleName" : "嵌入式FFF", "roleId" : "role36", "children" : []}
    ]}
  ];
  function Controller($scope) {
    $scope.classification1 = contantCroleList;
    $scope.changeClassification = function (selected1) {
      $scope.classification2 = selected1.children;
    };
  }
</script>
</html>

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

- Author -

slamdunk5373

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

为你的网站增加亮点的9款jQuery插件推荐

May 03 Javascript

js中判断文本框是否为空的两种方法

Jul 31 Javascript

javascript获取网页中指定节点的父节点、子节点的方法小结

Apr 24 Javascript

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

May 10 Javascript

js浏览器html5表单验证

Oct 17 Javascript

CSS+jQuery实现简单的折叠菜单

Dec 20 Javascript

VS Code转换大小写、修改选中文字或代码颜色的方法

Dec 15 Javascript

使用vue-router beforEach实现判断用户登录跳转路由筛选功能

Jun 25 Javascript

浅谈Webpack下多环境配置的思路

Jun 27 Javascript

Angular服务Request异步请求的实例讲解

Aug 13 Javascript

一步步教你利用Docker设置Node.js

Nov 20 Javascript

微信小程序实现张图片合成为一张并下载

Jul 16 Javascript

Angular4实现鼠标悬停3d倾斜效果

Oct 25 #Javascript

详解vue 组件之间使用eventbus传值

Oct 25 #Javascript

bootstrap时间控件daterangepicker使用方法及各种小bug修复

Oct 25 #Javascript

Windows安装Node.js报错:2503、2502的解决方法

Oct 25 #Javascript

JavaScript编程设计模式之构造器模式实例分析

Oct 25 #Javascript

vue2.0s中eventBus实现兄弟组件通信的示例代码

Oct 25 #Javascript

用js实现每隔一秒刷新时间的实例(含年月日时分秒)

Oct 25 #Javascript

You might like

收藏Javascript中常用的55个经典技巧

2007/08/12 Javascript

javascript 打印页面代码

2009/03/24 Javascript

用客户端js实现带省略号的分页

2013/04/27 Javascript

php实例分享之实现显示网站运行时间

2014/05/20 Javascript

jQuery根据ID获取input、checkbox、radio、select的示例

2014/08/11 Javascript

Node.js中的缓冲与流模块详细介绍

2015/02/11 Javascript

基于javascript简单实现对身份证校验

2021/01/25 Javascript

详解Angularjs 如何自定义Img的ng-load 事件

2017/02/15 Javascript

基于JavaScript实现拖动滑块效果

2017/02/16 Javascript

H5实现中奖记录逐行滚动切换效果

2017/03/13 Javascript

使用 NodeJS+Express 开发服务端的简单介绍

2017/04/07 NodeJs

浅析JavaScript中的特殊数据类型

2017/12/15 Javascript

ng-events类似ionic中Events的angular全局事件

2018/09/05 Javascript

解决echarts的多个折现数据出现坐标和值对不上的问题

2018/12/28 Javascript

vue动态绑定class的几种常用方式小结

2019/05/21 Javascript

微信小程序实现日期格式化和倒计时

2020/11/01 Javascript

JavaScript 实现HTML DOM增删改查操作的常见方法详解

2020/01/04 Javascript

JS实现简易计算器

2020/02/14 Javascript

请求时token过期自动刷新token操作

2020/09/11 Javascript

[43:53]OG vs EG 2019国际邀请赛淘汰赛胜者组 BO3 第三场 8.22

2019/09/05 DOTA

python中xrange和range的区别

2014/05/13 Python

python脚本实现统计日志文件中的ip访问次数代码分享

2014/08/06 Python

Python编写屏幕截图程序方法

2015/02/18 Python

Python基于matplotlib实现绘制三维图形功能示例

2018/01/18 Python

Python中defaultdict与lambda表达式用法实例小结

2018/04/09 Python

pygame游戏之旅计算游戏中躲过的障碍数量

2018/11/20 Python

Django 内置权限扩展案例详解

2019/03/04 Python

33个Python爬虫项目实战(推荐)

2019/07/08 Python

Python字典中的值为列表或字典的构造实例

2019/12/16 Python

python Popen 获取输出,等待运行完成示例

2019/12/30 Python

安装不同版本的tensorflow与models方法实现

2021/02/20 Python

用HTML5制作烟火效果的教程

2015/05/12 HTML / CSS

日化店促销方案

2014/03/26 职场文书

老龙头导游词

2015/02/11 职场文书

Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法

2021/11/21 数码科技

vue使用echarts实现折线图

2022/03/21 Vue.js