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 相关文章推荐
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Angular 路由route实例代码
Jul 12 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
详解angular element()方法使用
Apr 08 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
JavaScript实现Tab选项卡切换
Feb 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
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
python测试驱动开发实例
2014/10/08 Python
Python计算字符宽度的方法
2016/06/14 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
pandas apply多线程实现代码
2020/08/17 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
2014年母亲节寄语
2014/05/07 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
营业员岗位职责范本
2015/04/14 职场文书
公司表扬稿范文
2015/05/05 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
观后感格式
2015/06/19 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android