Angularjs实现下拉框联动的示例代码


Posted in Javascript onAugust 22, 2017

第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json。。。

实现截图

Angularjs实现下拉框联动的示例代码

html

<select ng-model="s1" ng-options="selectData.name for selectData in selectDatas">
    <option value="">--产品类目--</option>
  </select>
  <select ng-model="s2" ng-options="util.name for util in s1.utils">
    <option value="">--产品类型--</option>
  </select>

js

$scope.selectDatas = [{
        code: 01,
        name: "监控安全类",
        utils: [
          { code: 0101, name: "遥控门锁" },
          { code: 0102, name: "声光报警器" },
          { code: 0103, name: "摄像头" }
        ]
      },
      {
        code: 02,
        name: "大家电",
        utils: [
          { code: 0201, name: "空调" },
          { code: 0202, name: "洗衣机" },
          { code: 0203, name: "洗碗机" }
        ]
      }
    ]

第二种联动方式,这次是根据后台要求,自己写的一个联动,当然没有请求接口,就是单独写个固定值

1.联动的思路

1.首先是选择总类别
2.总类别选择后,会关联出设备
3.设备选择后,会关联出属性
4.属性选择后,会根据属性的不同,关联出不同的项目

2.代码

1)设备类别下拉

html

<select ng-model="devicetype" ng-options="x.category for x in devices" ng-change="changeType(devicetype)">
  <option value="">--设备--</option>
</select>

js

$scope.devices = [
   {"category":"大家电"},
     {"category":"红外感应"},
   {"category":"监控"},
   {"category":"灯光"},
]
// 根据大类来获取设备列表
$scope.changeType = function(x){
  $log.log(x.category)
  //TODO: 真正使用肯定是要用$http来请求设备列表
  //暂时测试使用下面的
  switch(x.category){
  case "大家电":
      $scope.yourdevices = [
        {"dev":"电视机(mac:32309fsaf)"},
        {"dev":"洗衣机(mac:32309fsaf)"},
        {"dev":"冰箱(mac:32309dqsq)"},
        {"dev":"空调(mac:32309fsaf)"}
      ];
      break;
  }
}

2)设备下拉

html

<select ng-model="yourdevice" ng-options="x.dev for x in yourdevices" ng-change="changeDev(yourdevice)">
  <option value="">--你的设备--</option>
</select>

js

$scope.changeDev = function (x) {
 $log.log(x.dev)
 switch (x.dev) {
  case '电视机(mac:32309fsaf)':
   $scope.params = [
    {
     'display_name': '开关',
     'data_type': 'bool',
     'data_range': [ '开','关']
    },
    {
     'display_name': '温度',
     'data_type': 'num',
     'data_range': [30]
    }
   ]
   //此处将json转换成对象,方便下面的属性相关操作,例如“开关”属性,要找去其相关的类型数据和值
   var paramsarr = $scope.params;
   var paramobj = {
   };
   paramsarr.forEach(function (v, i) {
    paramobj[v.display_name] = v;
   })
   $scope.paramobjs = paramobj;
 }
}

3)属性下拉

html

<select ng-model="param" ng-options="p.display_name for p in params" ng-change="changeParam(param.display_name)">
  <option value="">--属性--</option>
</select>

js

//获取数据类型和数据值
$scope.changeParam = function (x) {
 var pobj = $scope.paramobjs;
 $scope.views = pobj[x];
 $scope.type = $scope.views.data_type
 $log.log($scope.views)
}

4)属性项

html

使用ng-swtch来进行判断显示,若数值类型位bool,则显示单选框,若数值类型位num,则显示位大小比较下拉框和文本框

<div ng-switch="type">
    <div ng-switch-when="bool" style="margin: -20px auto auto 90px;">
      <label ng-repeat="x in views.data_range">
        <input type="radio" name="radio" value="{{x}}">{{x}}
      </label>
    </div>
    <div ng-switch-when="num" style="margin: -20px auto auto 90px;">
      <select ng-model="compare">
        <option value="0"><</option>
        <option value="1">=</option>
        <option value="2">></option>
      </select>
      {{views.data_range}}
      <input type="text">
    </div>
  </div>

3.实现效果

Angularjs实现下拉框联动的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 #Javascript
node中koa中间件机制详解
Aug 22 #Javascript
理解javascript async的用法
Aug 22 #Javascript
React Native之TextInput组件解析示例
Aug 22 #Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 #Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 #Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 #Javascript
You might like
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
php实现的顺序线性表示例
2019/05/04 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
从零学Python之hello world
2014/05/21 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
编程语言Python的发展史
2014/09/26 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
审计工作个人的自我评价
2013/12/25 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2014年质检员工作总结
2014/11/18 职场文书
意向协议书
2015/01/27 职场文书