复选框(全、单选)angular实现(待完善........)

前端之家收集整理的这篇文章主要介绍了复选框(全、单选)angular实现(待完善........)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<td id="label-week">
                    <label for="week-ck-all" ng-class="{active:all}">全<input type="checkBox" id="week-ck-all" ng-model="all" ng-click="chooseAllDay('all')"></label>
                    <label for="week-ck-mon"  ng-class="{active:chk1ed}">一<input type="checkBox" id="week-ck-mon" ng-click="chooseSingleDay(1,chk1ed)"></label>
                    <label for="week-ck-tue"  ng-class="{active:chk2ed}">二<input type="checkBox" id="week-ck-tue"  ng-click="chooseSingleDay(2,chk2ed)"></label>
                    <label for="week-ck-thi"  ng-class="{active:chk3ed}">三<input type="checkBox" id="week-ck-thi"  ng-click="chooseSingleDay(3,chk3ed)"></label>
                    <label for="week-ck-thu"  ng-class="{active:chk4ed}">四<input type="checkBox" id="week-ck-thu"  ng-click="chooseSingleDay(4,chk4ed)"></label>
                    <label for="week-ck-fri"  ng-class="{active:chk5ed}">五<input type="checkBox" id="week-ck-fri"  ng-click="chooseSingleDay(5,chk5ed)"></label>
                    <label for="week-ck-sat"  ng-class="{active:chk6ed}">六<input type="checkBox" id="week-ck-sat"  ng-click="chooseSingleDay(6,chk6ed)"></label>
                    <label for="week-ck-fri"  ng-class="{active:chk7ed}">日<input type="checkBox" id="week-ck-fri"  ng-click="chooseSingleDay(7,chk7ed)"></label>
                </td>
var dayz=[];
    var weekday_range=0;

    //设置选中标记
    function setCheckFlag(day,flag){

        switch(day)
        {
            case 1:
                $scope.chk1ed=!flag;
              break;
            case 2:
                $scope.chk2ed=!flag;
              break;
            case 3:
                $scope.chk3ed=!flag;
              break;
            case 4:
                $scope.chk4ed=!flag;
              break;
            case 5:
                $scope.chk5ed=!flag;
              break;
            case 6:
                $scope.chk6ed=!flag;
              break;
            case 7:
                $scope.chk7ed=!flag;
              break;
            case 'all':
                $scope.chk1ed=flag;
                $scope.chk2ed=flag;
                $scope.chk3ed=flag;
                $scope.chk4ed=flag;
                $scope.chk5ed=flag;
                $scope.chk6ed=flag;
                $scope.chk7ed=flag;

              break;
        }
    }   
    //选择全部星期

    $scope.chooseAllDay=function(all){
        if($scope.all){
            dayz=[];
            dayz.push(1,2,3,4,5,6,7,'all');
        }else{
            dayz=[];
        }
        setCheckFlag('all',$scope.all);
        if(dayz.indexOf('all')!=-1){
            weekday_range=0;
        }else{
            weekday_range=dayz.join(',');
        }
        // console.log(weekday_range);

    }

    //选择部分星期
    $scope.chooseSingleDay=function(day,flag){
        if(flag){
            $scope.all=false;
            setCheckFlag(day,flag);
            console.log(dayz);
            if(dayz.indexOf('all')!=-1){
                dayz.splice(dayz.indexOf('all'),1)
            }
            dayz.splice(dayz.indexOf(day),1)

            // console.log(day+"--"+dayz.indexOf(day))
            // console.log();
        }else{
            setCheckFlag(day,flag)
            dayz.push(day);
            if(dayz.length==7){
                $scope.all=true;
                dayz.push('all');
            }
        }

        if(dayz.indexOf('all')!=-1){
            weekday_range=0;
        }else{
            weekday_range=dayz.join(',');
        }

        // console.log(weekday_range)
    }

猜你在找的Angularjs相关文章