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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
Vue-component全局注册实例
Sep 06 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
PHP源代码数组统计count分析
2011/08/02 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
node.js入门学习之url模块
2017/02/25 Javascript
js实现一键复制功能
2017/03/16 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python flask安装和命令详解
2019/04/02 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
医学院毕业生自荐信范文
2014/03/06 职场文书
还款承诺书范文
2014/05/20 职场文书
个人贷款收入证明
2014/10/26 职场文书
导游词幽默开场白
2019/06/26 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers