각 이오니아 토글 그룹

Question

각과 이온으로 작성된 전화 갭 앱에 대한 토글 그룹이 있습니다. 기본 세트는 다음과 같습니다. 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> 

및 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... 
    } 

이없는 것이 변경되었습니다 토글의 ID와 상태로 얻을 수 있습니다. 이 작업을 수행하는 올바른 방법은 무엇입니까?

Answer 1

ng-model을 checked 속성으로 설정하면 해당 옵션을 선택하면 업데이트됩니다. ng-checked가 제거되므로 제거하십시오. 그리고 체크 된 항목에 액세스하려면, item을 ng-change의 updateRider 함수 표현식에 전달하고 거기에 액세스하십시오.

즉 :

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

및

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

Plnkr