CODEWITHSUNDEEP
angularionic2
Yokesh Varadhan
Yokesh Varadhan

Reputation: 1636

get value from the list when check box is clicked

i have a list with checkbox, when i check a checkbox i need the selected item to be displayed on click of done button 

 <ion-list *ngFor="let item of options" style="margin-bottom: 0px">
        <ion-grid>
            <ion-row>
                <ion-checkbox ></ion-checkbox>
                <ion-col>
                    <ion-label style="margin-bottom: 0px;  margin-top: 0px;">{{item.val}}</ion-label>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-list> 
    <button (click)="done()" >done</button>

done(){
        console.log("done");
        /*here  i need to get the values of the items that are selected*/
    }



public options =    [{
                        "val" : "United States"                          
                    },
                     {
                        "val" : "Afghanistan"
                    },
                     {
                        "val" : "Albania"
                    },
                     {
                        "val" : "Algeria"
                    },
                     {
                        "val" : "American Samoa"
                    }]

"options is an array of items" Could someone help me to get only the selected values

Upvotes: 1

Views: 570

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657148

checkboxes:boolean[];

constructor(){
  this.checkboxes = this.options.map(v => false);
}

done(){
  console.log("done");
  var result = []; 
  this.options.forEach(
      (val, idx) => result.push({item: val.val, checked: this.checkboxes[idx]}));
  console.log(result);
}

<ion-list *ngFor="let item of options; let i=index" style="margin-bottom: 0px">

  ...
  <ion-checkbox [(ngModel)]="checkboxes[i]" ></ion-checkbox>

Upvotes: 2

Related Questions