如何在angular2中的for循環中選擇多個複選框？

我已經嘗試使用角度2來列出帶有複選框的類別列表，並且用戶可以選擇任何類別。我試着用下面的代碼。問題是如果我選擇了任何一個複選框，則選中所有複選框。我無法獲取保存功能的表單值。 Food.category是動態的。如何解決這個問題？如何在angular2中的for循環中選擇多個複選框？

<form #f="ngForm" novalidate> 

     <div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category;"> 
      <label for="categoryname">   
      <input type = "checkbox" name="categoryname[]" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/> 
      {{categoryname}} 
      </label> 
     </div> 
     <button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button> 
    </form> 




    export class ExploreListComponent implements OnInit { 

     Catcheckbox:true ; 

     onClick(categoryname) { 
      alert(categoryname + ' was clicked!'); 
     } 

     save(isValid: boolean, f: User) { 
      if (!isValid) return; 
      console.log(f); 

     } 
    }

來源

2017-04-01 vel

@RahulSingh，其中是checkbox？的示例。 – vel

它不適用於多個複選框我的壞vl更新它 –

如下更改代碼，你會得到所有選中的複選框值;

模板：

<form #f="ngForm" novalidate> 
    <div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category;let i=index;"> 
     <label for="categoryname">   
      <input type="checkbox" name="categoryname[{{i}}]" [value]="categoryname" 
(change)="categories[$event.target.getAttribute('value')]=$event.target.checked"/> 
     {{categoryname}} 
     </label> 
    </div> 
     <button type="submit" (click)="save(f.valid)" class="btn btn-default">Submit</button> 
</form>

組件：

export class ExploreListComponent implements OnInit { 

     categories = {}; 

     save(isValid: boolean) { 
      if (!isValid) return; 
      console.log(this.categories); 
     } 
    }

來源

2017-04-01 10:46:01

謝謝。它的工作正常。 – vel

不客氣。 –

，如何更改如果我希望默認選中所有複選框？ – vel

<div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category;"> 
      <label for="categoryname">   
      <input type = "checkbox" *ngIf="selectAll" [checked]="selectedAll" name="categoryname[]" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/> 


       <input type = "checkbox" *ngIf="selectAll" [checked]="!selectedAll" name="categoryname[]" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/> 
      {{categoryname}} 
      </label> 
     </div> 
     <button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button> 
    </form>

上的選擇的點擊所有的按鈕

this.selectAll=true

因此，所有的元素將會被選中，你必須傳遞給* ngFor

整個陣列

來源

2017-04-01 10:34:51 Aravind

不工作。它是選中所有的複選框。 – vel

你在teamviewer中可用 – Aravind

Thanks Aravind。 @Vivek答案工作正常。 – vel

我會建議使用ReactiveFormsModule。在這種情況下，您將數組分配給所有輸入名稱屬性。嘗試僅分配當前索引，如設置在* ngFor指令中的名稱=「{{i}}」

<form #f="ngForm" novalidate> 
    <div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category; let i = index"> 
     <label for="categoryname">   
     <input type = "checkbox" name="{{i}}" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/> 
     {{categoryname}} 
     </label> 
    </div> 
    <button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button> 
</form>

來源

2017-04-01 10:52:22

如何在angular2中的for循環中選擇多個複選框？

回答

相關問題