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

实现截图

超文本标记语言

选择ng-model=' S1 ' ng-options=' select data。选择数据中的选择数据的名称'选项值='' -产品类目-/option/select选择ng-model=' S2 ' ng-options=' util。S1 util的名称。“util”选项值=“”-产品类型- /option /selectjs

$ scope。selectdatas=[{代码： 01，名称： '监控安全类，utils: [ { code: 0101，name: '遥控门锁},{代码： 0102,名称： '声光报警器},{代码： 0103,名称： '摄像头} ] },{代码： 02,名称： '大家电，utils: [ { code: 0201，name: '空调},{代码： 0202,名称： '洗衣机},{代码： 0203,名称： '洗碗机' } ] } ]第二种联动方式，这次是根据后台要求，自己写的一个联动，当然没有请求接口，就是单独写个固定值

1.联动的思路

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

2.代码

1)设备类别下拉

超文本标记语言

选择ng-model=“设备类型”ng-options=“x .设备中x的类别”ng-change=“更改类型(设备类型)”选项值='' -设备- /option/selectjs

$ scope。设备=[{ '类别' : '大家电},{ '类别' : '红外感应},{ '类别' : '监控},{ '类别' : '灯光'},]//根据大类来获取设备列表$ scope。changetype=function(x){ $ log。日志(x . category)//todo :真正使用肯定是要用$http来请求设备列表//暂时测试使用下面的开关(x.category){ case '大家电：美元范围。您的设备=[{ ' dev ' : '电视机(MAC :32309 SAF)' }，{'dev': '洗衣机(MAC :32309 SAF)' }，{'dev': '冰箱(mac:32309dqsq)'}，{'dev': '空调(MAC :32309 SAF)' }]；打破；}}2)设备下拉

超文本标记语言

选择ng-model='您的设备' ng-options=' x . dev for x in您的设备' ng-change=' change dev(您的设备)'选项值='' -你的设备- /option/selectjs

$ scope。change dev=function(x){ $ log。日志(x . dev)开关(x . dev){ case '电视机(MAC :32309 SAF)' :美元范围。params=[{ ' display _ name ' : '开关，' data_type': 'bool '，' data_range': ['开','关] }，{ 'display_name': '温度，' data_type': 'num '，' data_range': [30] } ] //此处将json转换成对象，方便下面的属性相关操作，例如"开关"属性，要找去其相关的类型数据和值var param sarr=$ scope . params var param obj={ }；paramsarr.forEach(函数(v，I){ param obj[v . display _ name]=v；})$ scope。param objs=param obj}}3)属性下拉

超文本标记语言

选择ng-model=' param ' ng-options=' p . display _ name for p in params ' ng-change=' change param(param。display _ name)'选项值='' -属性- /option/selectjs

//获取数据类型和数据值$ scope。change param=function(x){ var pobj=$ scope。paramobjs$ scope。view=pobj[x]；$ scope。type=$ scope。查看。data _ type $日志。日志($ scope)。视图)} 4)属性项

超文本标记语言

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

div ng-switch=' type ' div ng-switch-when=' bool ' style=' margin :-20px auto auto 90px；'在视图中标记ng-repeat=' x。“数据范围”输入类型=' radio ' name=' radio ' value=' { { x } } ' { { x } }/label/div div ng-switch-when=' num ' style=' margin 3360-20px auto auto 90px；'选择ng-model='compare '选项值=' 0 '/选项值=' 1 '=/选项值=' 2 '/选项/select { { view }。数据范围} }输入类型='text' /div /div3 .实现效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。