要为勾选了复选框的特定索引LI添加类,可以使用Angular的事件绑定和属性绑定来实现。以下是一个示例代码:
在HTML模板中:
-
{{ item }}
在组件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
selectedIndexes: number[] = [];
toggleSelection(index: number) {
if (this.selectedIndexes.includes(index)) {
const i = this.selectedIndexes.indexOf(index);
this.selectedIndexes.splice(i, 1);
} else {
this.selectedIndexes.push(index);
}
}
}
在上面的代码中,我们使用*ngFor
指令来循环遍历items
数组,并使用index
变量来获取当前索引。通过[class.selected]
属性绑定,我们根据selectedIndexes
数组中是否包含当前索引来动态添加或移除selected
类。
在toggleSelection
方法中,我们根据复选框的变化来更新selectedIndexes
数组。如果选中了复选框,我们将索引添加到数组中;如果取消选中,我们将索引从数组中移除。
这样,勾选复选框会动态地添加或移除相应LI元素的selected
类。你可以根据需要自定义类名,并在CSS中定义相应的样式。