Angular 2 - Wybierz element listy klikniętej (Dodaj "aktywną" klasę i usuń z rodzeństwa)

Mam następujące elementy listy w poniższym fragmencie kodu. Po kliknięciu myszki chciałbym wybrać ten element (dodać "aktywną" klasę i odznaczyć, czy jakieś inne elementy (rodzeństwo) zostały wybrane przez remove'active klasy. Osiągnąłem to samo używając jQuery (pełny kod poniżej). funkcjonalność w Kątowymi 2 sposóbAngular 2 - Wybierz element listy klikniętej (Dodaj "aktywną" klasę i usuń z rodzeństwa)

fragment kodu.

<!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 here

kątowa 2 Eksperyment:. Jestem w stanie ustawić klasę poprzez 'setElementClass' Jak usunąć 'aktywny' klasa z rodzeństwem Czy istnieją inne podejścia?

Lista widok składnik (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>

Code maszynopis (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) { 
    } 
}

Źródło

2016-12-06 RK_Aus

kątowa 2 lub kątowy 1? Dobrze byłoby zobaczyć, co zrobiłeś do tej pory, abyśmy mogli poprawić/poprawić to. Wygląda na to, że właśnie pytamy nas o pełną odpowiedź. – Searching

Angular 2 - Zaktualizowano moje pytanie za pomocą mojego kodu Angular 2. –

Można użyć ngClass na to, czego szukasz:

<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>

iw swoim listClick wystarczy ustawić wybraną pozycję do tej pozycji:

listClick(event, newValue) { 
    console.log(newValue); 
    this.selectedItem = newValue; // don't forget to update the model here 
    // ... do other stuff here ... 
}

Źródło

2016-12-06 04:54:20 Yaser

Dziękuję, Yaser. W podanym kodzie (listClick()), proszę dać mi znać, jak ustawić wybrany element. Przepraszam, jeśli to podstawowe pytanie, jestem całkiem nowy w Angular 2. –

@RajeshKrishna zobacz aktualizację – Yaser

Dziękuję Yaser, działa zgodnie z oczekiwaniami. –

Można też po prostu zdać indeks elementu li do komponentu podczas imprezy kliknij:

<ul id="grouplist" class="list-group"> 
    <li *ngFor="let item of items; let i=index" (click)="select(i)" 
     [ngClass]="{'active': selectedIndex == i, 'list-group-item': true}" > 
     {{ item.text }} 
    </li> 
</ul>

pozwól jego selectedIndex własność ty komponent zestawie:

@Component({ 
    ... 
}) 
export class ItemListComponent { 
    ... 
    selectedIndex: number; 
    select(index: number) { 
     this.selectedIndex = index; 
    } 
}

selectedIndex jest używany przez TEM plate, aby określić, czy przypisać klasę active do elementu li.

Zobacz w tym Plunker

Źródło

2016-12-06 05:45:05

Cześć Frank, dziękuję za odpowiedź. Ten działa również zgodnie z oczekiwaniami. Ponieważ Yaser najpierw udzielił odpowiedzi, przyjął tę odpowiedź. Przepraszam, jestem w stanie wybrać tylko jedną odpowiedź. –

Angular 2 - Wybierz element listy klikniętej (Dodaj "aktywną" klasę i usuń z rodzeństwa)

Odpowiedz

Powiązane problemy