Angular 2-选择单击的列表项(添加“活动"类并从同级中删除) [英] Angular 2 - Select clicked list item (Add 'active' class and remove from siblings)
问题描述
在下面的代码片段中，我具有以下列表项.在鼠标单击上，我想选择该项目(添加活动"类，并取消选择是否由remove'active类选择的其他任何项目(兄弟姐妹).我已经使用jQuery实现了相同的功能(下面的完整代码).如何实现Angular 2方式提供功能.
I have list items as follows in below code snippet. On mouse click I would like to select that item (add 'active' class and deselect if any other items (siblings) selected by remove'active class. I have achieved the same using jQuery (full code below). How I can achieve the functionality in Angular 2 way.
代码段:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="grouplist" class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
<li class="list-group-item">Item4</li>
<li class="list-group-item">Item5</li>
<li class="list-group-item">Item6</li>
<li class="list-group-item">Item7</li>
<li class="list-group-item">Item8</li>
<li class="list-group-item">Item9</li>
<li class="list-group-item">Item10</li>
</ul>
<script>
$(function () {
$('.list-group li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
})
</script>
</body>
</html>
JSFiddle 此处
JSFiddle here
Angular 2实验:我可以通过'setElementClass'设置类.如何从兄弟姐妹中删除活动"类?还是还有其他方法?
Angular 2 Experiment: I am able to set class via 'setElementClass'. How to remove 'active' class from siblings? Or is there any other approaches?
列表视图组件(test1.component.html):
List view component (test1.component.html):
<h2>Select List Item</h2>
<ul id="grouplist" class="list-group">
<li class="list-group-item" (click)="listClick($event)" *ngFor="let item of groups">
{{ item.name }}
</li>
</ul>
TypeScript代码(test1.component.ts):
TypeScript Code (test1.component.ts):
import { Component } from '@angular/core';
import { Renderer } from '@angular/core';
import { Group } from './group';
@Component({
selector: 'test1',
template: require('./test1.component.html')
})
export class Test1Component {
groups: Group[];
constructor(private render: Renderer) {
this.groups = [new Group("item1"), new Group("item2"), new Group("item3"), new Group("item4"), new Group("item5")];
}
public listClick(event: any) {
event.preventDefault();
this.render.setElementClass(event.target, "active", true);
// How to remove 'active' from siblings ?
}
}
group.ts
export class Group {
constructor(public name: String) {
}
}
推荐答案
您可以将ngClass用于所需的内容:
You can use ngClass for what you are looking for:
<ul id="grouplist" class="list-group">
<li class="list-group-item" [ngClass]="{'active': selectedItem == item}" (click)="listClick($event, item)" *ngFor="let item of groups">
{{ item.name }}
</li>
</ul>
然后在您的listClick中，将所选项目设置为该项目:
And in your listClick just set the selected item to that item:
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = newValue; // don't forget to update the model here
// ... do other stuff here ...
}
这篇关于Angular 2-选择单击的列表项(添加“活动"类并从同级中删除)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
