蝴蝶刀刀
2019-03-15 19:15:58
<ng-template ngFor [ngForOf]="checklist" let-item let-i="index"> <div class="ui checkbox"> <input type="checkbox" name="status" [checked]="item.isChecked"> <label for="wait-loan-id" class="Settlement">{{item.name}}<span class="black">({{item.cnt}})</span></label> </div> </ng-template>頁面效果是這樣:ts的代碼是這樣的:getCheckList(): void { let statusList: any = [ { name: '機(jī)審中', value: 0, cnt: 0 }, { name: '機(jī)審失敗', value: 2, cnt: 0 } ]; statusList.map((item) => { return item.isChecked = true; }); this.checklist = statusList; }chooseStatuses(event, index): void { let { value, checked } = event.target; this.toggleItemStatuses(checked, value, index); }下標(biāo)狀態(tài)我在發(fā)請(qǐng)求時(shí)需要判斷狀態(tài)的勾選是全選還是單選,全選就要org/apply?status=0&status=2向后臺(tái)請(qǐng)求,單選的話,就要看勾的是哪一個(gè)就哪一個(gè)下的value值,這樣就要監(jiān)聽input值的變化,但是我不會(huì),還有就是判斷單選狀態(tài),和選中或取消當(dāng)前選中狀態(tài)的邏輯不太清楚,求大佬幫忙!
2 回答

達(dá)令說
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊
竟然沒看懂你寫的代碼...還要多多理解雙向綁定啊,不能帶著jquery的思路想問題。我沒用template,直接寫了
public list = [{n:'t1', v:'t1', c: false}, {n:'t2', v:'t2', c: false}];
onCheckChange() {
console.log(this.list);
}
//HTML
<ul>
<li *ngFor="let item of list">
<input type="checkbox" [(ngModel)]="item.c" (change)="onCheckChange()" />{{item.n}}
</li>
</ul>
這里的change事件只是打印調(diào)試,沒有什么用處(除非你對(duì)checkbox多選的結(jié)果有額外的邏輯處理)。你運(yùn)行一下就明白了。
添加回答
舉報(bào)
0/150
提交
取消