json कोणीय 2: एकाधिक चेक किए गए चेकबॉक्स के मान प्राप्त करें




forms checkbox (7)

  1. मैंने उन लोगों के लिए थोड़ा सा सरल बना दिया है जो मूल्य वस्तु की सूची का उपयोग कर रहे हैं। 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. एक सूची बनाएं - xyzlist।

  3. मान असाइन करें, मैं इस सूची में जावा से मूल्यों को पास कर रहा हूं।
  4. मान इंट-आईडी हैं, बूलियन-चेक (घटक में पास कर सकते हैं)।
  5. अब Componenet.ts में मूल्य प्राप्त करने के लिए।

    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);
    
        }
    

मेरी समस्या वास्तव में सरल है: मेरे पास इस तरह के चेकबॉक्स की एक सूची है:

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

और मैं चयनित विकल्पों की एक सरणी भेजना चाहता हूं, जैसे कुछ विकल्प: [option1, option5, option8] विकल्प 1, विकल्प 5, विकल्प 8 [option1, option5, option8] यदि विकल्प 1, 5 और 8 चयनित हैं। यह सरणी एक JSON का हिस्सा है जिसे मैं HTTP PUT अनुरोध के माध्यम से भेजना चाहता हूं।

आपकी सहायताके लिए धन्यवाद!


मुझे आशा है कि यह किसी ऐसे व्यक्ति की मदद करेगा जिसकी एक ही समस्या है।

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>

component.ts

फ्लाइटिड्स सरणी में इस तरह के एक और सरणी होंगे [[सत्य, 'id_1'], [false, 'id_2'], [true, 'id_3'] ...] यहां सच है कि उपयोगकर्ता ने इसे चेक किया है, झूठा मतलब है उपयोगकर्ता ने चेक किया है और फिर इसे अनचेक किया है । जिन आइटमों को उपयोगकर्ता ने कभी नहीं देखा है उन्हें सरणी में डाला नहीं जाएगा।

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

}

मुझे गंटर के लिए एक समाधान धन्यवाद मिल गया है! यहां मेरा पूरा कोड है यदि यह किसी की मदद कर सकता है:

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

यहां 3 ऑब्जेक्ट्स का उपयोग कर रहा हूं:

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

और 3 उपयोगी तरीके हैं:

1 । विकल्प optionsMap शुरू करने के लिए:

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

2. optionsMap को अद्यतन करने के लिए optionsMap :

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

3. optionsChecked में optionsChecked को बदलने के लिए विकल्प optionsMap options और POST अनुरोध भेजने से पहले इसे options में संग्रहीत options :

updateOptions() {
    for(var x in this.optionsMap) {
        if(this.optionsMap[x]) {
            this.optionsChecked.push(x);
        }
    }
    this.options = this.optionsChecked;
    this.optionsChecked = [];
}

मुझे बस इस मुद्दे का सामना करना पड़ा, और वर्कस्पेस को साफ रखने के लिए, सब कुछ कम चर के साथ काम करने का फैसला किया। यहां मेरे कोड का उदाहरण दिया गया है

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

विधि, जिसे परिवर्तन पर बुलाया जाता है, मॉडल में मूल्य को धक्का दे रहा है, या इसे हटा रहा है।

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

ngModel (अंतिम कोणीय 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)
  }
}

मुझे एक ही समस्या का सामना करना पड़ा है और अब मेरे पास एक जवाब है जो मुझे और पसंद है (आप भी हो सकते हैं)। मैंने प्रत्येक चेकबॉक्स को सरणी अनुक्रमणिका में बाध्य किया है।

सबसे पहले मैंने इस तरह एक वस्तु परिभाषित की:

SelectionStatusOfMutants: any = {};

फिर चेकबॉक्स इस तरह हैं:

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

जैसा कि आप जानते हैं कि जेएस में ऑब्जेक्ट्स मनमाने ढंग से सूचकांक वाले सरणी हैं। तो नतीजा इतना आसान हो रहा है:

इस तरह चुने गए लोगों की गणना करें:

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

और इसी तरह के चुने गए लोगों को इसी तरह:

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

आप समझ सकते हैं?! बहुत ही सरल बहुत सुंदर है। TG।


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




angular2-forms