Angular和Ionic中的單選按鈕等複選框

我有一個Ionic複選框列表，如果單擊一個我希望其他人被取消選中。這裏是清單的例子：我開始寫這樣的事情Angular和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; 
    ........... 
    }

編輯：

我可以用單選按鈕，但他們不能全部取消選擇。

來源

2015-07-20 Cris69

我f用戶只能選擇一個，不應該是* radio * -lement？ – Yoshi

最簡單的方法是使用複選框的ng-true-value和ng-false-value。這樣，您可以直接將選定的付款方式綁定到您的模型。

查看

<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' 
    }; 
});

Plunker

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

來源

2016-05-03 05:09:07

-1

您需要在p_method中傳遞某些信息以檢測檢查了哪個複選框。例如，。

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

來源

2015-07-20 11:02:20 atinder

它是字符串不是模型，在評分之前三次考慮-ve – atinder

ng-model =「creditCard」ng-change =「p_method（）」根據你的說法，你將它作爲參數傳遞，它根本沒有任何意義因爲$ scope.creditCard可以在控制器 –

的任何地方訪問，它是'creditCard'而不是creditCard。檢查報價。 – atinder

這是我如何解決我自己的問題：

在視圖：

：從數據庫中取出

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

下面是一些服務數據（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; 
    };

來源

2015-07-20 15:00:37 Cris69

Angular和Ionic中的單選按鈕等複選框

回答

相關問題