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

最新推荐文章于 2024-06-25 08:33:06 发布

alices_lin

最新推荐文章于 2024-06-25 08:33:06 发布

阅读量667

点赞数

CC 4.0 BY-SA版权

分类专栏： angular angular自定义指令文章标签：指令 angular angular指令

本文链接：https://blog.youkuaiyun.com/alices_lin/article/details/61414301

angular 同时被 2 个专栏收录

5 篇文章

订阅专栏

angular自定义指令

2 篇文章

订阅专栏

本文介绍了一个 AngularJS 应用中的自定义指令 'yCbox'，该指令用于实现复选框功能，包括单选、全选及列表数据绑定等特性。通过这个指令，可以轻松地为应用中的表格或其他元素添加选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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