angular自定义指令(全选和单选)

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 = [];



                           

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值