angular2--怎么实现多选功能

本文介绍了如何在Angular2中实现多选功能,通过定义一个数组lists来存储数据,包含每个选项的状态。详细讲解了HTML、TS逻辑控制和CSS样式的实现方法,以达到多选和取消选择的效果。

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

实现效果如下,实现多选和取消的功能:
在这里插入图片描述
定义一个数组为lists,用来存放上面列举的列表,数据格式如下,其中status为标识该图片是否已选:

lists: any = [
	{
		id: 1,
		img: './assets/img/pic/c1.png',
		name: '展会',
		status: true
	},
	{
		id: 2,
		img: './assets/img/pic/c2.png',
		name: '讲座',
		status: false
	},
	{
		id: 3,
		img: './assets/img/pic/c3.png',
		name: '演唱会',
		status: false
	}
]

一、页面显示 html

<div class="r-cnt">
	<div class="r-item" *ngFor="let i of lists" (click)="chooseItems(i.id)">
		<img [src]="i.img" class="r-pic-bg" />
		<!--选中和未选中两个图标,状态切换-->
		<img [src]="pick" class="r-pic-icon" *ngIf="i.status==true" />   <!--选中时显示-->
		<img [src]="nopick" class="r-pic-icon" *ngIf="i.status==false" />   <!--未选中时显示-->
		<p class="r-label">{{i.name}}</p>
	</div>
</div>

二、逻辑控制 ts

chooseAry: any = []; //最终选择的图片,存储id值

lists: any = [
	{
		id: 1,
		img: './assets/img/pic/c1.png',
		name: '展会',
		status: true
	},
	{
		id: 2,
		img: './assets/img/pic/c2.png',
		name: '讲座',
		status: false
	},
	{
		id: 3,
		img: './assets/img/pic/c3.png',
		name: '演唱会',
		status: false
	}
]

pick: any = './assets/img/icon/ischoose.png';    //选中的图标
nopick: any = './assets/img/icon/nchoose.png';   //未选中的图标
//当点击图片时,会进行状态切换
chooseItems(id) {
	//循环遍历列表数组
	for(let i = 0; i < this.lists.length; i++) {
		//匹配点击的item和数组里面的对应
		if(id == this.lists[i].id) {
			//如果点击的item为选中状态就更改为未选中状态,同时从数组里去掉对应的元素,反之...
			if(this.lists[i].status == true) {
				this.lists[i].status = false;
				this.del(this.chooseAry,id);    
			} else {
				this.lists[i].status = true;
				this.chooseAry.push(id);
			}
		}
	}
	
	console.log(this.chooseAry);     //最终的选择类型数组
}

//删除数组中的某一个元素
del(ary, el){
	const index = ary.indexOf(el);   
	const delEle = ary.splice(index, 1);   
	return ary;            
}

三、样式 css

/*选择内容 S*/
.r-cnt{
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.r-item{
	/* margin-right: 8px; */
	/* display: inline-block; */
	position: relative;
	margin-bottom: 10px;
}

.r-item:nth-child(3n){
	margin-right: 0;
}

.r-item img.r-pic-bg{
    width: 92px;
    height: 92px;

}

.r-item img.r-pic-icon{
    position: absolute;
    width: 19px;
    height: 19px;
    top: 5px;
    right: 5px;
}

.r-label{
    text-align: center;
    padding: 3px 0;
    font-size: 15px;
    font-weight: bold;
}
/*选择内容 E*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值