Madhan kumar BK
Madhan kumar BK

Reputation: 73

Dynamically read ionic toggle value and post to database

I am displaying a list of names from the database, I need a toggle button in all list with respective to id and post them to the database. How can I add toggle button in ionic and read it's value dynamically with the id.

stud.html

<ion-item *ngFor="let list of getStudentList"> <ion-label>{{list.Student_FirstName}}</ion-label> <ion-toggle [(ngModel)]="list.Student_FirstName" (ionChange)="changeToggle()"></ion-toggle> </ion-item>

stud.ts

`

   changeToggle() {
    console.log(this.Student_FirstName + "is checked");
  }`

Upvotes: 2

Views: 2229

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

You can easily pass the current item to ionChange function

<ion-toggle 
  [(ngModel)]="list.Student_FirstName" 
  (ionChange)="changeToggle(list)">
</ion-toggle>

Component

changeToggle(list){
    console.log(list.Id)
}

Upvotes: 2

holydragon
holydragon

Reputation: 6728

You can use $http to send a request in Angular way. For your case, you need to specify the method to be 'POST' and send it to your Web-Service API (url) that deals with the database. Since it is POST method, don't forget to add 'data' in case your Web-Service needs variable(s) from this request.

In your changeToggle() function, you also need to check if it is toggled then you do something with your database, but if it is untoggled then you do a different thing or maybe do nothing. It's up to your requirement.

UPDATE

Try this:

<ion-item *ngFor="let list of getStudentList">
                <ion-label>{{list.Student_FirstName}}</ion-label>
                <ion-toggle [(ngModel)]="list.Student_FirstName" (ionChange)="changeToggle(list)"></ion-toggle>
            </ion-item>

and in your changeToggle() you take 1 input, which is the list.

changeToggle(list){
    console.log(list)
}

You should see the list object, which has its ID in it.

Hope this helps.

Upvotes: 0

Related Questions