前端之家收集整理的这篇文章主要介绍了
复选框(全、单选)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)
}