复选框，如单选按钮角和离子。

Question

我有一个Ionic复选框列表，如果我单击其中一个，我希望其他的被取消选举。下面是列表的一个示例：

 <ion-checkbox  ng-model="creditCard" ng-change="p_method()">
            Credit Card
 </ion-checkbox>
 <ion-checkbox  ng-model="cash" ng-change="p_method()">
            Cash
 </ion-checkbox>
 <ion-checkbox  ng-model="check" ng-change="p_method()">
            Check
 </ion-checkbox>

在我的控制器里，我开始写这样的东西：

  function p_method(){
     $scope.creditCard = $scope.creditCard === true ? false : true;
     $scope.cash = $scope.cash === true ? false : true;
     $scope.check = $scope.check === true ? false : true;  
     ...........
    }

编辑：

我可以用单选按钮，但不能全部取消选。

Answer 1

最简单的方法是使用复选框的ng真值和ng假值。这样，您就可以直接将选定的支付方法绑定到您的模型中。

视图

<ion-checkbox ng-repeat="(key,value) in vm.paymentTypes" ng-model="vm.paymentType" ng-true-value="'{{key}}'" ng-false-value="">{{value}}</ion-checkbox>

控制器

app.controller('MainCtrl', function($scope) {
  var vm = this;
  vm.paymentType = 'none';
  vm.paymentTypes = {
    'creditCard': 'Credit Card',
    'cash': 'Cash',
    'bankCheque': 'Bank cheque'
  };
});

柱塞

http://plnkr.co/edit/p6Z5FMxE9vz2NbAlhqrl?p=preview

Answer 2

我就是这样解决我自己的问题的：

认为：

<ion-checkbox  ng-repeat="(key,value) in paymentsMethod" ng-model="value" ng-change="p_change(key)">{{key}}
</ion-checkbox>

下面是带有从db中获取的一些服务数据(docDetails)的控制器：

    var paymentsMethod = {'credit card':false,'cash':false,'check':false};

    angular.forEach(paymentsMethod,function(value,key){
        if(key === docDetails.p_method){
            paymentsMethod[key] = true
        }
    });

    $scope.paymentsMethod = paymentsMethod;

    $scope.p_change = function(method){
        paymentsMethod = {'credit card':false,'cash':false,'check':false};
        angular.forEach(paymentsMethod, function(value,key){
            if(key === method){
                if(docDetails.p_method===method){
                    paymentsMethod[key]=true;
                }
                paymentsMethod[key] =  paymentsMethod[key] === true ? false : true;
            }
        });
        $scope.paymentsMethod = paymentsMethod;
    };

Answer 3

您需要在p_method中传递一些信息，以检测选中了哪个复选框。例如。

ng-change="p_method('creditCard')"