编程 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 相关文章推荐

jQuery学习总结之元素的相对定位和选择器(持续更新)

Apr 26 Javascript

整理8个很棒的 jQuery 倒计时插件和教程

Dec 12 Javascript

jquery动态添加删除div 具体实现

Jul 20 Javascript

JavaScript闭包实例讲解

Apr 22 Javascript

BootStrap中关于Select下拉框选择触发事件及扩展

Nov 22 Javascript

jQuery实现淡入淡出的模态框

Feb 09 Javascript

微信小程序向左滑动删除功能的实现

Mar 10 Javascript

node.js使用express框架进行文件上传详解

Mar 03 Javascript

vue（2.x，3.0）配置跨域代理

Nov 27 Javascript

TypeScript的安装、使用、自动编译的实现

Apr 10 Javascript

Vue 自适应高度表格的实现方法

May 13 Javascript

Vue axios 跨域请求无法带上cookie的解决

Sep 08 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

实现php加速的eAccelerator dll支持文件打包下载

2007/09/30 PHP

PHP最常用的ini函数分析针对PHP.ini配置文件

2010/04/22 PHP

PHP中register_globals参数为OFF和ON的区别（register_globals 使用详解）

2012/02/05 PHP

PHP中func_get_args(),func_get_arg(),func_num_args()的区别

2013/09/30 PHP

使用PHP强制下载PDF文件示例

2014/01/17 PHP

基于PHPexecl类生成复杂的报表表头示例

2016/10/14 PHP

简单谈谈PHP中的trait

2017/02/25 PHP

PHP实现权限管理功能示例

2017/09/22 PHP

User Scripts: Video Download by User Scripts

2007/05/14 Javascript

jquery中常用的SET和GET

2009/01/13 Javascript

jQuery 入门讲解1

2009/04/15 Javascript

extJs 常用到的增，删，改，查操作代码

2009/12/28 Javascript

jQuery手机拨号界面特效代码分享

2015/08/27 Javascript

noty ? jQuery通知插件全面解析

2016/05/18 Javascript

使用DeviceOne实现微信小程序功能

2016/12/29 Javascript

bootstrapValidator表单验证插件学习

2016/12/30 Javascript

原生js实现焦点轮播图效果

2017/01/12 Javascript

EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法

2017/01/19 Javascript

基于jquery实现二级联动效果

2017/03/30 jQuery

vue-scroller记录滚动位置的示例代码

2018/01/17 Javascript

mpvue全局引入sass文件的方法步骤

2019/03/06 Javascript

[02:29]大剑、皮鞭、女装，这届DOTA2勇士令状里都有

2020/07/17 DOTA

Python 元类使用说明

2009/12/18 Python

python实现写数字文件名的递增保存文件方法

2018/10/25 Python

Python paramiko模块使用解析（实现ssh）

2019/08/30 Python

利用PyCharm操作Github(仓库新建、更新，代码回滚)

2019/12/18 Python

Python HTTP下载文件并显示下载进度条功能的实现

2020/04/02 Python

购买200个世界上最好的内衣品牌：Bare Necessities

2017/02/11 全球购物

大学生的创业计划书就该这么写

2014/01/30 职场文书

化工工艺设计求职信

2014/06/25 职场文书

计划生育证明格式及范本

2014/10/09 职场文书

实习工作表现评语

2014/12/31 职场文书

学校拾金不昧表扬信

2015/01/16 职场文书

中学推普周活动总结

2015/05/07 职场文书

python基础之错误和异常处理

2021/10/24 Python

python自动化测试之Selenium详解

2022/03/13 Python