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程序设计有所帮助。

Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
小程序tab页无法传递参数的方法
Aug 03 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JavaScript实现随机五位数验证码
Sep 27 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
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
人事助理岗位职责
2013/11/18 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
秸秆管理实施方案
2014/03/15 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
终止劳动合同协议书
2014/10/05 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Win11 BitLocker 驱动器加密
2022/04/19 数码科技