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都独立出来了，然后通过继承一个总的指令来实现控制。