如何防止复选框在将其变量设置为真或假时选择全部? [英] How to prevent checkbox from selecting all when setting its variable to true or false?

问题描述

我用 ionic [v3] 制作了一个

解决方案

你是 ngModel 所有的复选框到同一个 value.

要修复它，您可以在对象上使用 open 属性:this.data[i].children[j].open.

您也可以删除 public selected: string = ''; 并在项目本身中执行此操作，否则您会遇到与值相同的问题.

.....<ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines><离子标记>{{ 项目名称 }}<p style="color: #0077ff;">{{ item.open ?'项目选择':'取消'}}</p></离子标记><ion-checkbox item-end [(ngModel)]="item.open" (click)="tofix(item)"></ion-checkbox></离子项目>......

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();
        }

解决方案

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

这篇关于如何防止复选框在将其变量设置为真或假时选择全部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！