CODEWITHSUNDEEP
angularionic3
frustrated-dev
frustrated-dev

Reputation: 451

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

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

cancelled selectionwhen selecting only 1 item

Upvotes: 2

Views: 89

Answers (1)

Norbert Bartko
Norbert Bartko

Reputation: 2632

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

Upvotes: 3

Related Questions