Question

我遇到了使用问题的问题Checkbox在ng-repeat中表现得像单选按钮。选择和取消选中该框时，只选择一个框。它正在工作没有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

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

Answer 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 demo http://plnkr.co/edit/qLlFBhnUdzTnAu1U71uk?p=preview

我希望它可以帮助你，或者它将来会帮助别人

玩得开心！

Answer 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 了解原型继承及其对范围的影响。

如何使复选框的行为像ng-repeat中的单选按钮？

2 个答案: