Angular 离子切换组

Question

我有一组用于使用 angular 和 ionic 编写的 phonegap 应用程序的开关。基本设置是这样的； 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 设置为选中的属性，这样无论是否选中该选项，它都会更新。删除 ng-checked 因为 ng-model 会处理它。为了访问选中的项目，只需在 ng-change 的 updateRider 函数表达式中传递 item 并在那里访问它。

即：

 <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

Angular 离子切换组

Angular Ionic Toggle Group

javascript

angularjs

ionic-framework