Reputation: 73
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
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
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