如何使複選框的行爲像ng-repeat中的單選按鈕一樣？

我遇到了使用複選框的問題，像ng-repeat中的單選按鈕。在選擇和取消選擇框中，一次只選擇一個框。它正在工作沒有Ng重複。但我想在ng-repeat中使用它。如何使複選框的行爲像ng-repeat中的單選按鈕一樣？

這裏是我的HTML文件：

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>AngularJS Plunker</title> 
     <script>document.write('<base href="' + document.location + '" />');</script> 
     <link rel="stylesheet" href="style.css" /> 
     <script data-require="[email protected]" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.1.5"></script> 
     <script src="app.js"></script> 
    </head> 
<body ng-controller="MainCtrl"> 
    <h1> WithOut ng-repeat </h1> 
    <input type="checkbox" ng-checked="model1=='11'" ng-click="model1='11'"> a 
    <br/> 
    <input type="checkbox" ng-checked="model1=='12'" ng-click="model1='12'"> b 
    <br/> 
    <input type="checkbox" ng-checked="model1=='13'" ng-click="model1='13'"> c 
    <br> 
    Model = {{model1}} 
    <h1> With ng-repeat </h1> 
    <div data-ng-repeat="p in pp.rate"> 
     <input type="checkbox" ng-checked="model=='{{p.price}}'" 
      ng-click="model='{{p.price}}'"> 
     Model = {{model}} 
    </div> 
    </body> 
</html>

這裏是我的控制器：

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.pp = { 
     rate: [ {price: '11'}, 
       {price: '12'}, 
       {price: '13'} 
     ] 
    }; 
});

這裏是我的Plunker鏈接 http://plnkr.co/edit/BUHPNjTGaIsG33hsSWeC?p=preview

請給我一個解決方案在此先感謝。

來源

2014-10-20 Abhishek

爲什麼不只是使用單選按鈕。這是他們的目的。 – Paddy 2014-10-20 08:36:12

因爲我的要求不是單選按鈕，所以我使用複選框。 – Abhishek 2014-10-20 08:39:23

會悄悄地暗示您的要求可能會從調整中受益。設計師似乎很少知道單選按鈕和複選框之間的區別。 – Paddy 2014-10-20 09:04:40

問題在於使用ng-repeat創建一個新的範圍，並且您沒有使用dot表示法來引用您的模型。

看到這裏更新plunkr http://plnkr.co/edit/EQdv60ppdVm5Nkp2o8p8?p=preview

我添加了一個對象selection跟蹤的選擇，而不是一個model字符串值。複選框，然後針對selection.model而不是model

檢查強烈建議您閱讀https://github.com/angular/angular.js/wiki/Understanding-Scopes 理解原型繼承和範圍的影響。

來源

2014-10-20 08:39:37 Chandermani

感謝您的指導，但是你的情況下，如果我選擇複選框，然後它顯示所有複選框相同的價值，但我的要求是一個選擇一次，只顯示選定的值...這裏是問題發生檢查此鏈接http： //plnkr.co/edit/Qb7VW7jDMCSfvHwvVvNR?p=preview – Abhishek 2014-10-20 08:49:33

它不顯示相同的值，但每個檢查bos更新相同的變量。看到這個plunkr http://plnkr.co/edit/iuAJavKmgy8neg9BkpBA?p=preview – Chandermani 2014-10-20 10:45:17

嘿感謝ChanderMani其實即時通訊使用這種正確的方式感謝解決我的問題.. – Abhishek 2014-10-20 12:12:46

今天我有同樣的問題，我終於找到了一個很好的解決方案：

<div data-ng-repeat="p in pp.rate"> 
    <input type="checkbox" ng-model="result.price" ng-true-value="{{p.price}}" ng-false-value="" > 
    {{p.plan}} 
</div>

plunkr演示http://plnkr.co/edit/qLlFBhnUdzTnAu1U71uk?p=preview

我希望它可以幫助你，或者幫助別人的未來

有樂趣！

來源

2015-02-06 15:56:42

這不適用於角1.3.14。可能需要一些編輯。 – Kunalxigxag 2015-03-28 12:24:48

爲我工作，如果你不介意，你會告訴我什麼是ng-true-value和ng-false-value在做什麼 – 2017-06-06 06:05:48

Usman Iqbal ng-false-value和ng-true-value是你想要使用的值，而不是假和真...所以在這種情況下是真的（檢查）你需要的價格和假（未檢查）只是一個空字符串 – 2017-06-07 07:09:05

如何使複選框的行爲像ng-repeat中的單選按鈕一樣？

回答

相關問題