Angular.js实现多个检验盒只能选择一个的方法示例

首先来看看效果

效果

实现这样的效果，必须使用指令了，只有使用指令才能单独控制每一个范围。

示例代码如下：

div class=' form-group ' label class=' col-sm-2 control-label '请选择文章主题色彩/label div class='col-sm-10 '主题组标签class='i-switch m-t-xs m-r '输入类型='复选框'输入-主题输入/输出/标签标签类='输入-开关BG-信息m-t-xs m-r '输入类型='复选框'输入-主题I/I/标签标签类=' I-开关BG-主m-t-xs m-r '输入类型='复选框'输入-主题输入/输出/标签标签类='输入开关BG '模块(“世硕项目”).指令(' themeGroup '，function(){ return { controller : function(){ var scope array=[]；this.addScope=函数(作用域){ var self=thisscopeArray.push(范围);范围$on('$destory '，函数(){ self.removeScope(作用域);}) };this.closeScope=函数(作用域){//var l=作用域数组。长度；angular.forEach(scopeArray，function (value) { if(value！=scope){ value。flag=false} }) };this.removeScope=函数(作用域){ var index=scopeArray.indexOf(作用域);if(index！==-1){ scopeArray.splice(index，1)；} };this.getIndex=函数(作用域){ var index=scopeArray.indexOf(作用域);收益指数；} } } }) .指令('输入血红素，function(){ return { restrict : ' ea ',require:'^？主题组，模板：输入类型=' checkbox ' ng-click=' choseTheme()' ' ng-model=' flag ' '，replace:true，scope:{}，link: function (scope，element，attr，them con){ var coloarray=[' # 27 c24c '，' #23b7e5 '，' #7266ba '，' # f 05050 ']；themeCon.addScope(作用域);范围。chosetheme血红素=function(){ them con。closescope(作用域);var index=themeCon.getIndex(作用域);var color=color array[index]；范围$ emit(' GetArticleThEmcolor '，{ ' color ' : color })；控制台。日志(范围。旗帜)；};} } })})()这里简单说一下，实现的主要思想就是，通过指令单独生成范围，每一个指令都是一个单独的范围，这样每个尼日利亚模态都独立出来了，然后通过继承一个总的指令来实现控制。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者使用Angular.js能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。