angular 监听input单选,多选值的变化

<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>

页面效果是这样:

https://img4.mukewang.com/5cb2d5980001e4f804010036.jpg

ts的代码是这样的:


getCheckList(): void {

    let statusList: any = [

      { name: '机审中', value: 0, cnt: 0 },

      { name: '机审失败', 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);

  }

下标状态

我在发请求时需要判断状态的勾选是全选还是单选,全选就要

org/apply?status=0&status=2向后台请求,单选的话,就要看勾的是哪一个就哪一个下的value值,这样就要监听input值的变化,但是我不会,还有就是判断单选状态,和选中或取消当前选中状态的逻辑不太清楚,求大佬帮忙!



蝴蝶刀刀
浏览 833回答 2
2回答

达令说

竟然没看懂你写的代码...还要多多理解双向绑定啊,不能带着jquery的思路想问题。我没用template,直接写了&nbsp; &nbsp; public list =&nbsp; [{n:'t1', v:'t1', c: false}, {n:'t2', v:'t2', c: false}];&nbsp; &nbsp; onCheckChange() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.list);&nbsp; &nbsp; }&nbsp; &nbsp; //HTML&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li *ngFor="let item of list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" [(ngModel)]="item.c" (change)="onCheckChange()" />{{item.n}}&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>这里的change事件只是打印调试,没有什么用处(除非你对checkbox多选的结果有额外的逻辑处理)。你运行一下就明白了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript