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压缩工具下载集合
Mar 06 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
Vue.js表单控件实践
Oct 27 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
解决vue点击控制单个样式的问题
Sep 05 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
js实现简单放大镜效果
Mar 07 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
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php-app开发接口加密详解
2018/04/18 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
告诉大家什么是JSON
2008/06/10 Javascript
document.compatMode介绍
2009/05/21 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
js实现微信聊天界面
2020/08/09 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python的Flask框架的简介和安装方法
2015/11/13 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python中如何获取类属性的列表
2016/12/26 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
简单了解Django项目应用创建过程
2020/07/06 Python
美国滑板店:Tactics
2020/11/08 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
区域销售经理职责
2013/12/22 职场文书
文明寄语大全
2014/04/11 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年学校工作总结
2014/11/20 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL