angular自定义指令（全选和单选）

来源：互联网发布：卡巴斯基软件和nod软件编辑：程序博客网时间：2024/04/30 00:57

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