Angular2 - 如果单击复选框,则更新消息

时间:2017-08-15 18:10:09

标签: angular checkbox

我有一个在加载时加载消息的div,但可以根据是否单击三个复选框之一来更改它。有三种可能的表格要填写,表格从#1到#3等待完成(即表格#1需要先完成,然后表格#2,然后表格#3)。用户可以根据三个复选框选择需要完成的表单。

<div class="col-sm-3 statusTextField">Status:&nbsp;&nbsp;
  <div style="display: inline;" [style.color] ="statusColor">
    <span style="font-size: x-large;">&#x25CF;</span>
  </div>&nbsp;{{status}}
</div>

三个复选框

 <label class="checkbox-inline">
   <input type="checkbox" value="form1" [ngModel]="form1" [formControl]="generalForm.controls['form1']" (click)="updateStatusOnCheckboxClick()">form1
 </label>

 <label class="checkbox-inline">
   <input type="checkbox" value="form2" [ngModel]="form2" [formControl]="generalForm.controls['form2']" (click)="updateStatusOnCheckboxClick()">form2
 </label>

 <label class="checkbox-inline">
   <input type="checkbox" value="form3" [ngModel]="form3" [formControl]="generalForm.controls['form3']" (click)="updateStatusOnCheckboxClick()">form3
 </label>

当我调用click函数时,我想相应地设置状态。如果选择了表单1和表单2,我想将状态设置为“表单1待定”。基本上,状态应该是列表中的第一个表单,基于他们选择的内容。我有一个名为updateStatusOnCheckboxClick()的函数,我想用它来控制状态。如果我尝试传递值并对其执行条件语句,则会滞后,如果我选择复选框1,然后选择2,则单击事件将仅显示form1 == 1并将状态设置为“表单1待定” ”

如果我在输入字段中添加ID,我是否可以使用类似updateStatusOnCheckboxClick(this.id)的ID将ID传递给函数,然后该函数将如下所示:

//If the id for checkbox is 'Form1'
updateStatusOnCheckboxClick(id:string) {
  if(id == "form1") {
     this.status = "Form 1 Pending";
  }
  //The else will check if form2 is the lowest.  If form1 is selected
  //
  else if(id == "form2") {
     this.status = "Form 2 Pending";
  }
  else if(id == "form3") {
     this.status = "Form 3 Pending";
  }
}

1 个答案:

答案 0 :(得分:1)

尝试:

>>> import re
>>> re.sub(r'\s{2,}', ' ', big_img_box[0].text.strip())
"New York [USA], August 6 (ANI): The latest designs from Apple's HomePod firmware revealed that the tech giant is hinting the launch of a 4K Apple TV with high dynamic range (HDR) support for both HDR10 and Dolby Vision. While the current range of Apple's TV set-top box is incompatible to 4K technology, iOS developer Guilherme Rambo revealed that the company is hinting an adoption of the ultra high-definition format, reports The Verge. Reports of the new range of Apple TV have surfaced time and again over the past few months, starting February this year. It is said that implementing the HDR and 4K content will prove to b beneficial for the company, rather than a simpler resolution, since popular online movie and television platforms like Netflix and Amazon support the two high-definition formats. Last month, iTunes started listing movies as supporting 4K and HDR in users' purchase histories, thus providing more thrust to the speculations of the 4K Apple TV. (ANI)"

然后在您的updateStatusOnCheckboxClick()函数中,您应该可以访问所有表单属性,例如id等。