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


Posted in Javascript onFebruary 24, 2017

首先来看看效果

Angular.js实现多个checkbox只能选择一个的方法示例
效果

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

示例代码如下:

<div class="form-group">
   <label class="col-sm-2 control-label">请选择文章主题色彩</label>
   <div class="col-sm-10" theme-group>
   <label class="i-switch m-t-xs m-r">
    <input type="checkbox" input-theme >
    <i></i>
   </label>
   <label class="i-switch bg-info m-t-xs m-r">
    <input type="checkbox" input-theme>
    <i></i>
   </label>
   <label class="i-switch bg-primary m-t-xs m-r">
    <input type="checkbox" input-theme >
    <i></i>
   </label>
   <label class="i-switch bg-danger m-t-xs m-r">
    <input type="checkbox" input-theme>
    <i></i>
   </label>
   </div>
</div>
(function () {
 angular
 .module("shishuoproject")
 .directive("themeGroup",function(){
  return{
  controller: function () {
   var scopeArray=[];
   this.addScope= function (scope) {
   var self=this;
   scopeArray.push(scope);
   scope.$on("$destory",function(){
    self.removeScope(scope);
   })
   };
   this.closeScope= function (scope) {
   //var l=scopeArray.length;
   angular.forEach(scopeArray, function (value) {
    if(value!=scope){
    value.flag=false;
    }
   })
   };
   this.removeScope= function (scope) {
   var index=scopeArray.indexOf(scope);
   if(index!==-1){
    scopeArray.splice(index,1);
   }
   };
   this.getIndex= function (scope) {
   var index=scopeArray.indexOf(scope);
   return index;
   }
  }
  }
 })
 .directive("inputTheme",function(){
  return{
  restrict:'EA',
  require:"^?themeGroup",
  template:'<input type="checkbox" ng-click="choseTheme()" ng-model="flag">',
  replace:true,
  scope:{},
  link: function (scope,element,attr,themeCon) {
   var colorArray=['#27c24c','#23b7e5','#7266ba',' #f05050'];
   themeCon.addScope(scope);
   scope.choseTheme= function () {
   themeCon.closeScope(scope);
   var index=themeCon.getIndex(scope);
   var color=colorArray[index];
   scope.$emit("getArticleThemeColor",{'color':color});
   console.log(scope.flag);
   };
  }
  }
 })
})()

这里简单说一下,实现的主要思想就是,通过指令单独生成scope,每一个指令都是一个单独的scope,这样每个ng-modal都独立出来了,然后通过继承一个总的指令来实现控制。

总结

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

Javascript 相关文章推荐
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
js读取配置文件自写
Feb 11 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
几行js代码实现自适应
Feb 24 #Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 #Javascript
JavaScript基本类型值-Number类型
Feb 24 #Javascript
AngularJS Toaster使用详解
Feb 24 #Javascript
js获取隐藏元素的宽高
Feb 24 #Javascript
You might like
PHP共享内存用法实例分析
2016/02/12 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Python中除法使用的注意事项
2014/08/21 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python代码xml转txt实例
2020/03/10 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
采购主管工作职责
2013/12/12 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
总经理岗位职责描述
2014/02/08 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP