angular.module('app').directive('yCbox',[function(){
return {
template : '<label class="checkbox-inline i-checks"><input type="checkbox" ng-checked="(cType && cAll.checked) || (!cType &&container.indexOf(id)!=-1))" ng-click = "callback($event)"></lable>',
scope : {
cType : '@', //单选或者全选
container : '=', //容器(装选中的)
cAll :'=', //全选
datas : ‘=’, //列表数据
yId:'@' //id
},
link : function(scope,ele,attr){
if(scope.cType == 'all'){
//全选情况
scope.callback = function(event){
event.stopPropagation();
if(event.target.nodeName != 'INPUT' && event.target.nodeName != 'TD' && event.target.nodeName != 'SPAN' && event.target.nodeName !='STRONG') return;
$scope.container = [];
scope.cAll.checked = !scope.cAll.checked;
if(scope.cAll.checked){
angular.forEach(scope.datas,function(item,i){
scope.container.push(item.i); //把选中的id放进容器中
});
}
};
}else{
scope.id = parseInt(scope.yId);
scope.cType = false;
scope.callback = function(event){
var id;
if(event.target.nodeName != 'INPUT' && event.target.nodeName != 'TD' && event.target.nodeName != 'SPAN' && event.target.nodeName !='STRONG') return;
id = scope.id;
var isset = scope.container.indexOf(id);
if(isset === -1){
scope.container.push(id);
}else{
scope.container.splice(isset,1);
scope.cAll.checked = false;
}
if(scope.container.length == scope.datas.length){
scope.cAll.checked = true;
}else{
scope.cAll.checked = false;
}
}
}
}
}
}]);
请求的页面
<y-cbox c-type="all" datas="datas" c-all="selectAll" container="checked"></y-cbox>
<y-cbox c-all='selectAll' datas="datas" container="checked" y-id="{{data.id}}"></y-cbox>
请求的js
$scope.selectAll = {checked : false};
$scope.checked = [];