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

您可以将empty_storing_array事件替换为ngModelChange事件，并在其中将click对象传递为

event

并在component方法中，尝试获取名称，值和检查状态为

(change)="GetStats($event)"

在堆栈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)">

获取Angular中的复选框名称，值和选中状态

4 个答案: