如何使复选框的行为类似于 ng-repeat 中的单选按钮？答案

【问题标题】：How to make checkboxes behave like radio buttons in ng-repeat?如何使复选框的行为类似于 ng-repeat 中的单选按钮？
【发布时间】：2014-12-15 04:24:57
【问题描述】：

在 ng-repeat 中使用 Checkbox 的行为类似于单选按钮时遇到问题。选择和取消选择框，一次只会选择一个框。 没有 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="angular.js@1.1.x" 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

请给我一个解决方案提前谢谢。

【问题讨论】：

为什么不只使用单选按钮。这就是他们的目的。
因为我的要求不是单选按钮，这就是我使用复选框的原因。
会悄悄地建议您的要求可能会从调整中受益。设计师似乎很少知道单选按钮和复选框之间的区别。
这是一个有效的要求 - 用户可以不选择任何内容或其中之一。使用单选按钮，您无法取消选择。

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

我今天也遇到了同样的问题，终于找到了一个不错的解决方案：

<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

希望对你有所帮助，或者以后对其他人有所帮助

玩得开心！

【讨论】：

这在 Angular 1.3.14 中不起作用。也许需要一些编辑。
为我工作，如果你不介意你能告诉我 ng-true-value 和 ng-false-value 做什么
Usman Iqbal ng-false-value 和 ng-true-value 是您要使用的值，而不是 false 和 true...所以如果这种情况为真（检查），您需要价格并且是假的（未选中）只是一个空字符串

【解决方案2】：

问题在于 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 了解原型继承和对范围的影响。

【讨论】：

感谢您的指导，但是如果我在复选框上选中了您的情况，那么它会为所有复选框显示相同的值，但我的要求是一次选择一次，并且只显示所选值的值...这里是出现问题检查此链接plnkr.co/edit/Qb7VW7jDMCSfvHwvVvNR?p=preview
它不显示相同的值，但为每个检查 bos 更新相同的变量。看到这个 plunkr plnkr.co/edit/iuAJavKmgy8neg9BkpBA?p=preview
嘿，谢谢 ChanderMani 其实我正在以正确的方式使用它来解决我的问题..
你能告诉我如果没有选中复选框，那么如何显示 {{selection.model}} 的 0 值。
由于是单选，selection 将只包含选中\选中的内容。未选择的内容默认为 0。