Hello all, I am currently writing my first ionic app. I am trying to use a toggle inside a list and not quite achieving the goal I need.
This block functions perfectly, but toggling one item in the list toggles ALL items in the list - even though it only executes the change function for the toggled item.
<ion-list> <ion-item ng-repeat="product in products" class="item item-thumbnail-left item-toggle"> <img ng-src="{{vm.setimage(product.logo_url)}}" /> <h3>{{product.name}}</h3> <p>Case Price: ${{product.cost}}</p> <label class="toggle toggle-positive"> <input type="checkbox" ng-model="vm.newToggleObject.toggle" ng-change="vm.set_toggle(vm.newToggleObject, product.id)" /> <div class="track"> <div class="handle"></div> </div> </label> </ion-item> </ion-list>
If I wrap the toggle element in an ion-toggle tag it visually looks okay and responds but doesn’t actually trigger any functions.
I thought I had understood the docs and examples correctly but obviously not. What is the correct way to implement toggles inside an ion-list so they act independently?