獲取Angular中的復選框名稱，值和選中狀態

Question

我有以下4個復選框，它們是動態生成的。 在角度組件中，我想檢索復選框的“名稱”，“值”和“狀態”。

HTML：

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

零件：

filterResults(obj: any, isChecked: boolean){
  console.log(obj);
  console.log(isChecked); // {}, true || false
} 

我可以獲取復選框的狀態，但不能獲取名稱和值。 打印到控制台后， obj是未定義的。 我想根據復選框的名稱和值將過濾器應用於數據集。

我如何獲得已選中復選框的名稱和值，所以可以做到這一點？

Answer 1

最好了解您正在使用哪個版本。 這將是其中一種方法：

<input type="checkbox" 
   name="automotive" 
   value="car" (change)="checkValues($event)" 
   ngModel 
   (ngModelChange)="filterResults(obj, $event)">

並在相應的.ts文件中

checkValues(e: any) { console.log(e) }

您必須在source屬性中找到要查找的所有屬性。

Answer 2

您可以將ngModelChange事件替換為click事件，在該event中將event對象傳遞為

(change)="GetStats($event)"

在組件方法中，嘗試獲取名稱，值和檢查狀態為

GetStats(event: Event) {
    console.log(event.target.name, event.target.value, event.target.checked);
}

在stackblitz中查看更多信息https://stackblitz.com/edit/angular-get-dynamic-checkbox-attributes

Answer 3

您可以向每個復選框添加動態ID：

<input type="checkbox" [attr.id]="uniqueIdHere" ... >

然后像這樣訪問您的復選框屬性：

var checkboxValue = (<HTMLInputElement>document.getElementById("uniqueIdHere")).value;

如果您的復選框是通過循環生成的，則可以將索引用作[attr.id]

Answer 4

我認為您可以做到這一點：

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'car'}, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'truck'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'shirts'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'pants'}, $event)">