web-dev-qa-db-fra.com

Angular 2 - Sélectionnez l’élément de la liste sur lequel vous avez cliqué (Ajouter une classe 'active' et le retirer de la fratrie)

J'ai la liste des éléments comme suit dans l'extrait de code ci-dessous. Sur un clic de souris, je souhaite sélectionner cet élément (ajouter la classe 'active' et désélectionner tout autre élément (frères et soeurs) sélectionné par remove'active class. J'ai réalisé la même chose avec jQuery (code complet ci-dessous). fonctionnalité en angulaire 2 voies.

Extrait de code:

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

Angular 2 Experiment: Je peux définir une classe via 'setElementClass'. Comment supprimer la classe 'active' de la fratrie? Ou y a-t-il d'autres approches?

Composant de la vue liste (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 TypeScript (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) {
    }
}
angular
15
RK_Aus

Vous pouvez utiliser ngClass pour ce que vous recherchez:

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

Et dans votre listClick, définissez simplement l'élément sélectionné sur cet élément:

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

Vous pouvez également simplement transmettre l'index de l'élément li à votre composant lors d'un événement click:

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

Ensuite, laissez le composant définir sa propriété selectedIndex:

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

La variable selectedIndex est utilisée par le modèle pour déterminer s'il convient d'affecter la classe active à l'élément li.

Voir dans cette Plunker

13
Frank Fajardo

<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(event, newValue) {
     console.log(newValue);
     this.selectedItem = newValue;  // don't forget to update the model here
     // ... do other stuff here ...
    }

Pour appliquer la classe active au clic de l'élément sélectionné et la supprimer d'un autre élément, cliquez sur 

onClickOfOtherElement(){
  this.selectedItem = ''
}
0
Bhavi P

Pour ceux qui ne sont pas convaincus par la solution acceptée et qui proviennent de la communauté AngularJS, voici une solution pour vous.

HTML:

<li *ngFor="let quality of qualities" 
    [ngClass]="quality.id === activeElement ? 'active' : 'none'"
    (click)="selectedItem(quality.id)"
    >
  {{quality.quality}}
</li>

CSS: 

.active {
  background-color: #000000;
  color : #ffffff;
}

Composant:

public activeElement = 1;  
public selectedItem(id) {
    this.activeElement = id;
 }

Remarque: la collection de mon ngFor ressemble à qlist = [ { qualité: 'À propos de moi', id: 1 }] Donc, j'utilise quality.id pour changer de classe, vous pouvez utiliser votre propre attribut pour changer. Remplacez simplement la variable activeElement par celle que vous souhaitez définir par défaut.

0
sagars01