1
votes

Comment ajouter plusieurs valeurs de case à cocher sélectionnées à un tableau en utilisant Javascript?

J'ai un élément d'entrée rempli à l'aide de la boucle * ngFor récupérant les données d'un autre tableau. En sélectionnant plusieurs cases à cocher, j'ai besoin que leurs valeurs soient poussées dans mon tableau vide 'selectedArr'. Retrouvez ci-dessous le code:

<div>
  <div class="form-group">
    <label>Add a Task: </label>
    <input class="form-control" type="text" [(ngModel)]="task" />
  </div>
  <button (click)="addTask(task)">Add</button>
  <br />
  <br />
  <div>
    My To Do List:
    <ul>
      <li *ngFor="let todo of toDo, index as i">
        <input class="i" type="checkbox" (click)="addSelected(i)" />
        {{todo}}
      </li>
    </ul>
  </div>
  <div class="btn class">
    <button class="btn btn-primary" (click)="deleteValue()">Delete</button>
  </div>
</div>

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  toDo = ["Test", "Eat", "Sleep"];
  task: string;
  addTask(task: string) {
    this.toDo.push(task);
  }
  selectedArr = [];
  deleteValue() {}

  addSelected(i) {
    let checkId = document.getElementsByClassName("i");
    console.log(checkId);
    if (checkId.checked === true) {
      this.selectedArr.push(i);
    }
    console.log(this.selectedArr);
  }
}

javascript typescript angular html arrays

1 commentaires

Vous devriez d'abord lire comment créer un formulaire avec ReactiveForms . Et vous ne devriez jamais essayer d'obtenir un élément du DOM (document.getElementsByClassName) avec Angular.

3 Réponses :

2
votes

Essayez comme ceci:

.html

  checked = []

  selectedArr = [];


  addSelected(item,evt) {
    if (evt) {
      this.selectedArr.push(item);
    }else {
      let i = this.selectedArr.indexOf(item)
      this.selectedArr.splice(i,1)
    }
  }

.ts

 <li *ngFor="let todo of toDo, index as i">
     <input class="i" type="checkbox" [(ngModel)]="checked[i]" (ngModelChange)="addSelected(todo,$event)" />
    {{todo}}
 </li>

Démo de travail

0 commentaires

0
votes

La méthode getElementsByClassName de l'interface Document renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Puisque vous passez l'index, vous pouvez accéder à l'élément cliqué comme:

addSelected(i) {
   let checkId = document.getElementsByClassName("i")[i];
   console.log(checkId);
   if (checkId.checked) {
      this.selectedArr.push(i);
   } else {
      // Remove the index from selectedArr if checkbox was unchecked
      let idx = this.selectedArr.indexOf(i)
      if (idx > -1) this.selectedArr.splice(idx, 1)
   }
   console.log(this.selectedArr);
}

0 commentaires

0
votes

s'il vous plaît, les choses faciles fonctionnent facilement. Vous n'avez pas besoin du tableau manuellement. Vous devez utiliser une fonction (*)

get selectedArray()
{
    return this.toDo.filter((x,index)=>this.checked[index])
}

<li *ngFor="let todo of toDo, index as i">
     <!--remove (ngModelChange) -->
     <input class="i" type="checkbox" [(ngModel)]="checked[i]" />
    {{todo}}
</li>
{{selectedArray}}

(*) cela vous permet de "démarrer" l'application avec certains sélectionnés

0 commentaires