复选框，比如Angular和Ionic中的单选按钮

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-true-value和ng-false-value。这样你就可以直接将选择的支付方式绑定到你的模型。

<<p> 视图/strong>

<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 =预览

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')"