检查Angular2中的复选框时启动事件

时间:2016-05-06 16:55:45

标签: html5 checkbox data-binding typescript angular

我是Angular2和全局网络中的新手,我想在检查checkbox时使用Material-Design启动一个更改数据库中的对象参数值的操作,或者使用[(ngModel)]取消选中它,我尝试了checked | unchecked但没有发生任何事情。我的想法是,我必须添加一些true状态的命题来判断它是false还是 export class PropositionModel { id:string; wordingP:string; // the proposition propStatus:Boolean; // the proposition status } 命题。这是命题模型

<div class="uk-width-xlarge-1-1 uk-width-medium-1-2">
                <div (submit)="addProp1()" class="uk-input-group">
                    <span class="uk-input-group-addon"><input type="checkbox"  data-md-icheck/></span>
                    <label>Proposition 1</label>
                    <input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/>
                </div>
            </div>

这是命题的Html代码:

addProp1() {
        this.proposition1 = new PropositionModel();
        this.proposition1.propStatus = false;
        this.propositionService.addProposition(this.proposition1)
            .subscribe(response=> {
                console.log(response);
                console.log(this.proposition1);
                this.proposition1 = new PropositionModel();})
    }

这是用于添加命题的TypeScript代码:

false

正如您所看到的那样,proposition status默认为 while((iter->range = strtok(NULL, ",")) != NULL) { iter = (struct range_list*) malloc(sizeof(struct range_list)); // you are overwriting iter; iter->next = iter; iter->next = 0; } ,我想在检查命题后更改它。 这是一个图像如何寻找更好的问题理解。 enter image description here

有任何帮助吗?

4 个答案:

答案 0 :(得分:83)

PLUNKER DEMO

模板: 使用更改事件来调用函数并传递事件。

from openpyxl import Workbook
(some commands to open the workbook)

listofnames=wb.sheetnames
for k in listofnames:
    ws=wb.worksheets(k)

TS: 收到该事件并检查是否已选中复选框,然后再添加属性。

Map<String, Condition> keyConditions = new HashMap();
keyConditions.put("event", new Condition()
                    .withComparisonOperator(EQ)
                    .withAttributeValueList(new AttributeValue().withS(event)));
QueryRequest one = new QueryRequest()
    .withTableName(REQ_TABLE)
    .withIndexName("event")
    .withKeyConditions(keyConditions);
QueryResult queryResult = dynamoDB.query(one);

答案 1 :(得分:11)

如果向ngModel引用添加双重处罚,则会获得与模型属性的双向绑定。然后可以在事件处理程序中读取和使用该属性。在我看来,这是最干净的方法。

<input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />

答案 2 :(得分:5)

您可以使用ngModel之类的

<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>

通过更新代码中的属性checkboxValue以及用户addProp()更改复选框时更新复选框状态。

答案 3 :(得分:1)

查看演示https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html

  CheckBox: use change event to call the function and pass the event.

<label class="container">    
   <input type="checkbox" [(ngModel)]="theCheckbox"  data-md-icheck 
    (change)="toggleVisibility($event)"/>
      Checkbox is <span *ngIf="marked">checked</span><span 
     *ngIf="!marked">unchecked</span>
     <span class="checkmark"></span>
</label>
 <div>And <b>ngModel</b> also works, it's value is <b>{{theCheckbox}}</b></div>