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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
Javascript注入技巧
Jun 22 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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采集腾讯微博的实现代码
2012/01/19 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
SVG描边动画
2017/02/23 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python实现合并两个排序的链表
2019/03/03 Python
Python 转换文本编码实现解析
2019/08/27 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python count函数使用方法实例解析
2020/03/23 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
python Scrapy框架原理解析
2021/01/04 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
大学生入党思想汇报
2014/01/01 职场文书
调研汇报材料范文
2014/08/17 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
个人优缺点总结
2015/02/28 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书