编程 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 EasyUI中对表格进行编辑的实现代码

Jun 10 Javascript

JavaScript高级程序设计读书笔记之十一内置对象Global

Mar 07 Javascript

三种动态加载js的jquery实例代码另附去除js方法

Apr 30 Javascript

javascript基本包装类型介绍

Apr 10 Javascript

JavaScript+canvas实现七色板效果实例

Feb 18 Javascript

Bootstrap组件系列之福利篇几款好用的组件（推荐二）

Jul 12 Javascript

jQuery实现的多张图无缝滚动效果【测试可用】

Sep 12 Javascript

View.post() 不靠谱的地方你知道多少

Aug 29 Javascript

Node.js调用fs.renameSync报错（Error: EXDEV, cross-device link not permitted）

Dec 27 Javascript

使用validate.js实现表单数据提交前的验证方法

Sep 04 Javascript

js+HTML5 canvas 实现简单的加载条(进度条)功能示例

Jul 16 Javascript

CocosCreator入门教程之网络通信

Apr 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

php网站被挂木马后的修复方法总结

2014/11/06 PHP

PHP获取二维数组中某一列的值集合

2015/12/25 PHP

TP5框架使用QueryList采集框架爬小说操作示例

2020/03/26 PHP

javascript贪吃蛇完整版(源码)

2013/12/09 Javascript

javascript得到当前页的来路即前一页地址的方法

2014/02/18 Javascript

微信小程序实战之轮播图（3）

2017/04/17 Javascript

angularjs之$timeout指令详解

2017/06/13 Javascript

js实现canvas保存图片为png格式并下载到本地的方法

2017/08/31 Javascript

详解NodeJs开发微信公众号

2018/05/25 NodeJs

Vue入门之数量加减运算操作示例

2018/12/11 Javascript

使用Angular Cli如何创建Angular私有库详解

2019/01/30 Javascript

JS用最简单的方法实现四舍五入

2019/08/27 Javascript

JavaScript中的this原理及6种常见使用场景详解

2020/02/14 Javascript

python实现查询IP地址所在地

2015/03/29 Python

Python实现使用卷积提取图片轮廓功能示例

2018/05/12 Python

python如何生成网页验证码

2018/07/28 Python

Python3实现获取图片文字里中文的方法分析

2018/12/13 Python

python flask 如何修改默认端口号的方法步骤

2019/07/12 Python

Python实现直方图均衡基本原理解析

2019/08/08 Python

Django1.11自带分页器paginator的使用方法

2019/10/31 Python

Python中生成一个指定长度的随机字符串实现示例

2019/11/06 Python

Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解）)

2019/12/09 Python

python实现时间序列自相关图(acf)、偏自相关图(pacf)教程

2020/06/03 Python

如何基于Django实现上下文章跳转

2020/09/16 Python

详解如何修改python中字典的键和值

2020/09/29 Python

Europcar意大利：汽车租赁

2019/07/07 全球购物

毕业生的自我评价分享

2013/12/18 职场文书

餐饮管理自我介绍信

2014/01/15 职场文书

艾滋病宣传标语

2014/06/25 职场文书

村安全生产责任书

2014/08/25 职场文书

民族学专业职业生涯规划范文：积跬步以至千里

2014/09/11 职场文书

浪漫婚礼主题活动策划方案

2014/09/15 职场文书

2015高考寄语集锦

2015/02/27 职场文书

2015年见习期个人工作总结

2015/05/28 职场文书

Go 自定义package包设置与导入操作

2021/05/06 Golang

MySQL 使用自定义变量进行查询优化

2021/05/14 MySQL