How to prevent checkbox from selecting all when setting its variable to true or false?

拈花ヽ惹草 提交于 2020-01-04 14:16:56

问题


I made an accordion list with ionic [v3] as you can see in the link video tutorial the select option menu is not in the .html file. The list items in the menu are from .json file as you can see in my .ts file

form.html

    .....
    <ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
         <ion-label>{{ item.name }} <p style="color: #0077ff;">{{ selected }}</p> </ion-label>
         <ion-checkbox item-end [(ngModel)]="value" (click)="tofix(item)"></ion-checkbox>
    </ion-item>
    .....

form.ts

    export class FormPage  implements OnInit{
      data: any[];

      public SelectedItemToFix: string = '';

      @Input('item') item: any;

      constructor(public navCtrl: NavController, 
                  public navParams: NavParams, 
                  private http: Http,
                  private toastCtrl: ToastController) {
                    let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
                      localData.subscribe(data => {
                        this.data = data;
                      });
                      this.title = navParams.get('title');
                      this.subtitle = navParams.get('subtitle');
                  }

      toggleSection(i) {
        this.data[i].open = !this.data[i].open;
      }

      toggleItem(i, j) {
        this.data[i].children[j].open = !this.data[i].children[j].open;
      }

      ngOnInit() {
      }

    value = false;
    public selected: string = '';

        async tofix(item){
          let toast = await this.toastCtrl.create({
            message: `Added item to be fix : ${item.name}`,
            duration: 2000
          }); 
          console.log(this.value);
          this.SelectedItemToFix += `${item.name}`;
          if(this.value == true){
            this.selected = "Item Selected"
          }
          else{
            this.selected = "Cancelled"
          }
          toast.present();
        }


回答1:


You are ngModel all checkboxes to the same value.

To fix it you could use the open attribute on your object :this.data[i].children[j].open.

Also you can remove public selected: string = ''; and do it in the item itself, therwise you have the same problem as with the value.

.....
<ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
     <ion-label>
          {{ item.name }} 
          <p style="color: #0077ff;">
              {{ item.open ? 'Item Selected' : 'Cancelled'}}
          </p> 
     </ion-label>
     <ion-checkbox item-end [(ngModel)]="item.open" (click)="tofix(item)"></ion-checkbox>
</ion-item>
.....


来源:https://stackoverflow.com/questions/58425924/how-to-prevent-checkbox-from-selecting-all-when-setting-its-variable-to-true-or

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!