如何防止 ion-checkbox 选择相同的项目值? [英] How to prevent ion-checkbox from selecting the same item value?

问题描述

这是一个手风琴列表菜单，在菜单的第 3 级，我为每个项目添加了一个复选框.此代码已经从所选项目中获取值，但问题是当我取消我的选择时，它让我得到它的值.如何防止复选框选择相同的项目并在选中时取消?

This is an accordion list menu and at the 3rd level of the menu, I put a checkbox for each item. This code already getting the value from the item selected but the problem is when I cancel my selection it keeps me getting its value. How can I prevent a checkbox from selecting the same item and cancel if it is selected?

form.html

<!-- Third-Level -->
<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' : '' }}
      </p> 
   </ion-label>
   <!-- <ion-checkbox item-end (click)="tofix(item)"></ion-checkbox> -->
   <ion-checkbox item-end [(ngModel)]="item.open" (click)="tofix(item)"></ion-checkbox>
</ion-item>

form.ts

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

   @Input('item') item: any;

   constructor(
      public navCtrl: NavController, 
      public navParams: NavParams, 
      private http: Http,
      private toastCtrl: ToastController) {
         this.http.get('assets/data/menus.json')
            .map(res => res.json().items)
            .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() {
   }

   async tofix(item){
      const toast = await this.toastCtrl.create({
         message: `Added item to be fix : ${item.name}`,
         duration: 2000
      }); 

      this.SelectedItemToFix += `${item.name}`;
      toast.present();
   }

   ionViewDidLoad() {
      console.log('ionViewDidLoad FormPage');
   }   
}

推荐答案

您可以访问项目的 open 属性，然后决定显示什么，或者是否显示快餐栏.

You can access the open attribute of your item and then decide what to display, or if display the snackbar at all.

p>

另外我猜红色按钮的值存储在 SelectedItemToFix 中，所以只有新项目会存储在按钮中.

Also i gues the red button value is stored in SelectedItemToFix, so only the new item will be stored in the button.

async tofix(item){
   this.SelectedItemToFix = item.open ? `${item.name}` : '';

   // If you dont want to display the snackbar
   // if(!item.open) return;

   const toast = await this.toastCtrl.create({
      message: `${item.open ? 'Added' : 'Removed'} item ${item.open ? 'to' : 'from'} be fix : ${item.name}`,
      duration: 2000
   });

   toast.present();
}

这篇关于如何防止 ion-checkbox 选择相同的项目值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！