Angular Ionic Toggle Group

Question

I have a group of toggles for a phonegap app written with angular and ionic. The basic set is like this; html:

<div ng-controller="LoginCtrl">
<h2 class="title">Items</h2>
    <ion-toggle ng-repeat="item in riderList"
        ng-model="selectedRider"
        ng-checked="item.checked"
        ng-change=" updateRider();"
        data-rider-id="{{ item.id }}"
        >
        {{ item.text }}
    </ion-toggle>
<button class="button button-full button-positive" id="zpass-logout">
  Logout
</button>
</div>

and js:

angular.module('zpassApp')
  .controller('SettingsCtrl', ['$scope', '$http', '$rootScope', '$location',
    function($scope, $http, $rootScope, $location) {

    $scope.riderList = [];

    $scope.addRider = function(name, id, active) {
        $scope.riderList.push( { "text" : name, "checked" : active , "id" : id});
        $scope.$apply();
    };

    $scope.updateRider = function() {
        console.log("in update rider how do I get the item.id!?" );
        // I expect this to be selectedRider.id, but that is undefined
        // in jquery would be $(this)..data('id');
    }

    function getRidersFromDB() {
        // this just queries db an populates, works fine...
    }

can't seem to get to the id and state of the toggle that has changed. What is the correct way to do this?

Answer 1

Set your ng-model to the checked property so that it will update if that option is checked or not. Remove ng-checked since ng-model will take care of it. And inorder to access checked item just pass item in the updateRider function expression on ng-change and access it there.

ie:

 <ion-toggle ng-repeat="item in riderList"
    ng-model="item.checked"
    ng-change=" updateRider(item);">
    {{ item.text }}
</ion-toggle>

and

$scope.updateRider = function(item) {
  //console.log(item.id, item.checked);
}

Plnkr