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

学习ExtJS TextField常用方法

Oct 07 Javascript

纯js网页画板(Graphics)类简介及实现代码

Dec 24 Javascript

js实现各种复制到剪贴板的方法(分享)

Oct 27 Javascript

js print打印网页指定区域内容的简单实例

Nov 01 Javascript

jQuery实现的上传图片本地预览效果简单示例

Mar 29 jQuery

js将键值对字符串转为json字符串的方法

Mar 30 Javascript

使用ESLint禁止项目导入特定模块的方法步骤

Mar 04 Javascript

layui table设置某一行的字体颜色方法

Sep 05 Javascript

JQuery样式与属性设置方法分析

Dec 07 jQuery

VUE实现Studio管理后台之鼠标拖放改变窗口大小

Mar 04 Javascript

js实现石头剪刀布游戏

Oct 11 Javascript

手把手教你如何编译打包video.js

Dec 09 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图片处理：加水印、缩略图的实现（自定义函数：watermark、thumbnail）

2010/12/02 PHP

apache中为php 设置虚拟目录

2014/12/17 PHP

PHP基于curl后台远程登录正方教务系统的方法

2016/10/14 PHP

PHP implode()函数用法讲解

2019/03/08 PHP

[JS源码]超长文章自动分页（客户端版）

2007/01/09 Javascript

简单三步，搞掂内存泄漏

2007/03/10 Javascript

jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

2010/04/25 Javascript

打造基于jQuery的高性能TreeView(asp.net)

2011/02/23 Javascript

js星星评分效果

2014/07/24 Javascript

jquery插件hiAlert实现网页对话框美化

2015/05/03 Javascript

js实现兼容性好的微软官网导航下拉菜单效果

2015/09/07 Javascript

js确认框confirm()用法实例详解

2016/01/07 Javascript

JavaScript判断用户名和密码不能为空的实现代码

2016/05/16 Javascript

深入理解基于vue-cli的vuex配置

2017/07/24 Javascript

switchery按钮的使用方法

2017/12/18 Javascript

Node.Js中实现端口重用原理详解

2018/05/03 Javascript

python3使用urllib模块制作网络爬虫

2016/04/08 Python

Python中遇到的小问题及解决方法汇总

2017/01/11 Python

Python将json文件写入ES数据库的方法

2019/04/10 Python

Django Rest framework认证组件详细用法

2019/07/25 Python

Pyqt5 关于流式布局和滚动条的综合使用示例代码

2020/03/24 Python

pycharm通过anaconda安装pyqt5的教程

2020/03/24 Python

python3 配置logging日志类的操作

2020/04/08 Python

Python的in，is和id函数代码实例

2020/04/18 Python

浅谈Python描述数据结构之KMP篇

2020/09/06 Python

简单的辞职信范文

2014/01/18 职场文书

国庆节文艺活动方案

2014/02/03 职场文书

马智宇结婚主持词

2014/04/01 职场文书

四风个人对照检查材料思想汇报（办公室通用版）

2014/10/07 职场文书

2014年保育员个人工作总结

2014/12/02 职场文书

护理专业自我评价

2015/03/11 职场文书

人事行政助理岗位职责

2015/04/11 职场文书

煤矿百日安全活动总结

2015/05/07 职场文书

李强优秀员工观后感

2015/06/16 职场文书

致创业您：正能量激励人心句子（48条）

2019/08/15 职场文书

python实现一个简单的贪吃蛇游戏附代码

2022/06/28 Python