实现只能选择一个的checkbox

先来看看效果

实现只能选择一个的checkbox_第1张图片
效果

实现这样的效果,必须使用指令了,只有使用指令才能单独控制每一个scope。

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

你可能感兴趣的:(实现只能选择一个的checkbox)