wake-up-neo.com

Winkel 2: Werte mehrerer angekreuzter Kontrollkästchen abrufen

Mein Problem ist sehr einfach: Ich habe eine Liste mit Kontrollkästchen wie folgt:

<div class="form-group">
    <label for="options">Options :</label>
    <label *ngFor="#option of options" class="form-control">
        <input type="checkbox" name="options" value="option" /> {{option}}
    </label>
</div>

Und ich möchte ein Array der ausgewählten Optionen senden, etwa: [option1, option5, option8] wenn die Optionen 1, 5 und 8 ausgewählt sind. Dieses Array ist Teil einer JSON, die ich über eine HTTP-PUT-Anforderung senden möchte.

Danke für Ihre Hilfe!

46
Yannick Morel

Ich habe dank Gunter eine Lösung gefunden! Hier ist mein gesamter Code, wenn es jemandem helfen könnte:

<div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="#option of options; #i = index">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option}}"
                           [checked]="options.indexOf(option) >= 0"
                           (change)="updateCheckedOptions(option, $event)"/>
                    {{option}}
                </label>
            </div>
        </div>

Hier sind die 3 Objekte, die ich verwende:

options = ['OptionA', 'OptionB', 'OptionC'];
optionsMap = {
        OptionA: false,
        OptionB: false,
        OptionC: false,
};
optionsChecked = [];

Und es gibt drei nützliche Methoden:

1 . Um optionsMap zu initiieren:

initOptionsMap() {
    for (var x = 0; x<this.order.options.length; x++) {
        this.optionsMap[this.options[x]] = true;
    }
}

2. um die optionsMap zu aktualisieren:

updateCheckedOptions(option, event) {
   this.optionsMap[option] = event.target.checked;
}

3. um optionsMap in optionsChecked umzuwandeln und in options zu speichern, bevor die POST - Anfrage gesendet wird:

updateOptions() {
    for(var x in this.optionsMap) {
        if(this.optionsMap[x]) {
            this.optionsChecked.Push(x);
        }
    }
    this.options = this.optionsChecked;
    this.optionsChecked = [];
}
27
Yannick Morel

Hier ist ein einfacher Weg mit ngModel (final Angular 2)

<!-- my.component.html -->

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options">
        <label>
            <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}
93
ccwasden

erstellen Sie eine Liste wie: -

this.xyzlist = [
  {
    id: 1,
    value: 'option1'
  },
  {
    id: 2,
    value: 'option2'
  }
];

Html: -

<div class="checkbox" *ngFor="let list of xyzlist">
            <label>
              <input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label>
          </div>

dann in seiner Komponente ts: -

onCheckboxChange(option, event) {
     if(event.target.checked) {
       this.checkedList.Push(option.id);
     } else {
     for(var i=0 ; i < this.xyzlist.length; i++) {
       if(this.checkedList[i] == option.id) {
         this.checkedList.splice(i,1);
      }
    }
  }
  console.log(this.checkedList);
}
14
Alok Kamboj
<input type="checkbox" name="options" value="option" (change)="updateChecked(option, $event)" /> 

export class MyComponent {
  checked: boolean[] = [];
  updateChecked(option, event) {
    this.checked[option]=event; // or `event.target.value` not sure what this event looks like
  }
}
4

Ich habe mich gerade mit diesem Problem konfrontiert und beschlossen, alles so wenig wie möglich zu gestalten, um den Arbeitsbereich sauber zu halten. Hier ist ein Beispiel für meinen Code

<input type="checkbox" (change)="changeModel($event, modelArr, option.value)" [checked]="modelArr.includes(option.value)" />

Die Methode, die bei Änderung aufgerufen wurde, drückt den Wert des Modells oder entfernt ihn.

public changeModel(ev, list, val) {
  if (ev.target.checked) {
    list.Push(val);
  } else {
    let i = list.indexOf(val);
    list.splice(i, 1);
  }
}
2
tv1st

Ich hoffe, das würde jemandem helfen, der das gleiche Problem hat.

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
  <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
     <input type="checkbox" [value]="flight.id" formControlName="flightid"
         (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
  </ng-template>
</form>

komponente.ts

flightids-Array hat ein anderes Array wie dieses [[true, 'id_1'], [false, 'id_2'], [true, 'id_3'] ...] .__ bedeutet, dass der Benutzer das Kontrollkästchen aktiviert und das Kontrollkästchen deaktiviert hat .. Die Elemente, die der Benutzer noch nie geprüft hat, werden nicht in das Array eingefügt.

flightids = []; 
confirmFlights(value){  
    //console.log(this.flightids);

    let confirmList = [];
    this.flightids.forEach(id => {
      if(id[0]) // here, true means that user checked the item 
        confirmList.Push(this.flightList.find(x => x.id === id[1]));
    });
    //console.log(confirmList);

}
2
James Sung
  1. Ich habe gerade etwas für diejenigen vereinfacht, die eine Liste von Value Object . XYZ.Comonent.html

    <div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="let option of xyzlist">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option.Id}}"
    
                           (change)="onClicked(option, $event)"/>
                    {{option.Id}}-- {{option.checked}}
                </label>
            </div>
            <button type="submit">Submit</button>
        </div> 
    

    ** XYZ.Component.ts **.

  2. erstellen Sie eine Liste - xyzlist.

  3. werte zuweisen, ich übergeben Werte aus Java in dieser Liste.
  4. Die Werte sind Int-Id, Boolean-geprüft (Kann in Component.ts übergeben werden).
  5. Um jetzt einen Wert in Componenet.ts zu erhalten.

    xyzlist;//Just created a list
    onClicked(option, event) {
        console.log("event  " + this.xyzlist.length);
        console.log("event  checked" + event.target.checked);
        console.log("event  checked" + event.target.value);
        for (var i = 0; i < this.xyzlist.length; i++) {
            console.log("test --- " + this.xyzlist[i].Id;
            if (this.xyzlist[i].Id == event.target.value) {
                this.xyzlist[i].checked = event.target.checked;
            }
            console.log("after update of checkbox" + this.xyzlist[i].checked);
    
        }
    
2
Gourav Bhatia

Ich bin auf das gleiche Problem gestoßen und jetzt habe ich eine Antwort, die mir mehr gefällt (vielleicht auch Sie). Ich habe jedes Kontrollkästchen an einen Array-Index gebunden.

Zuerst habe ich ein Objekt wie folgt definiert:

SelectionStatusOfMutants: any = {};

Dann sind die Checkboxen so:

<input *ngFor="let Mutant of Mutants" type="checkbox"
[(ngModel)]="SelectionStatusOfMutants[Mutant.Id]" [value]="Mutant.Id" />

Wie Sie wissen, sind Objekte in JS Arrays mit beliebigen Indizes. Das Ergebnis wird also so einfach abgerufen:

Zähle so ausgewählte aus:

let count = 0;
    Object.keys(SelectionStatusOfMutants).forEach((item, index) => {
        if (SelectionStatusOfMutants[item])
            count++;
    });

Und ähnlich wie das Holen von ausgewählten wie folgt:

let selecteds = Object.keys(SelectionStatusOfMutants).filter((item, index) => {
        return SelectionStatusOfMutants[item];
    });

Siehst du ?! Sehr einfach sehr schön TG.

1
ConductedClever

Da ich lange Zeit damit verbracht habe, ein ähnliches Problem zu lösen, antworte ich, um meine Erfahrungen zu teilen. Mein Problem war das gleiche, zu wissen, viele Kontrollkästchen Wert zu bekommen, nachdem ein bestimmtes Ereignis ausgelöst wurde. Ich habe viele Lösungen ausprobiert, aber für mich ist die Verwendung von ViewChildren das sexieste.

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components: QueryList<any>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

Hier gefunden: https://stackoverflow.com/a/40165639/4775727

Potentielle andere Lösungen für ref, es gibt viele ähnliche Themen, keine von ihnen haben diese Lösung zum Ziel ...:

0
4x10m

Die @ccwasden-Lösung oben funktioniert für mich mit einer kleinen Änderung. Jedes Kontrollkästchen muss einen eindeutigen Namen haben, ansonsten funktioniert die Bindung nicht

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options; let i = index">
        <label>
            <input type="checkbox"
                   name="options_{{i}}"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

und stellen Sie sicher, dass Sie FormsModule in Ihr Hauptmodul importieren

import { FormsModule } from '@angular/forms';


imports: [
    FormsModule
  ],
0
Syed Waqas