How to make checkboxes behave like radio buttons in ng-repeat?

javascript html angularjs twitter-bootstrap

12,212

Solution 1

I had the same problem today and I finally found a nice solution:

<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

I hope it helps you, or it helps others in the future

Have fun!

Solution 2

The issue is with ng-repeat creating a new scope and you not using dot notation to reference your model.

See the updated plunkr here http://plnkr.co/edit/EQdv60ppdVm5Nkp2o8p8?p=preview

I added a object selection that tracks selection instead of a model string value. The checkbox is then checked against selection.model instead of model

Highly recommend you read https://github.com/angular/angular.js/wiki/Understanding-Scopes to understand prototypal inheritance and the effect on scope.

12,212

Author by

Abhishek

Updated on June 23, 2022

Comments

Abhishek almost 2 years

I have faced problem to use Checkbox behave like radio button in ng-repeat. Where select and unselect the box and one time only one box will be selected. It is working Without Ng-repeat. But i want to use this in ng-repeat.

Here is my HTML File :

<!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>

Here is My Controller :

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

Here is My Plunker Link http://plnkr.co/edit/BUHPNjTGaIsG33hsSWeC?p=preview

Please Give Me a solution thanks in advance.