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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
详细分析vue表单数据的绑定
Jul 20 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获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
Use Word to Search for Files
2007/06/15 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python引用DLL文件的方法
2015/05/11 Python
python中的格式化输出用法总结
2016/07/28 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python实现BackPropagation算法
2017/12/14 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python----数据预处理代码实例
2019/03/20 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
django自定义模板标签过程解析
2019/12/14 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python如何实现定时器功能
2020/05/28 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
医药专业推荐信
2013/11/15 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
家长给孩子的评语
2014/01/30 职场文书
实习协议书范本
2014/04/22 职场文书
医院信息公开实施方案
2014/05/09 职场文书
工作年限证明范本
2015/06/15 职场文书
公司开业主持词
2015/07/02 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书