Angular - Binding checkboxes to ng-model from ng-repeat

Question

I have some data coming back from a resource that looks like:

$scope.phones = [
    {
        Value: <some value>,
        IsDefault: true
    },
    {
        Value: <some value>
        IsDefault: false
    }
];

And for simplicity sake, here's the repeater:

<div ng-repeat="phone in phones">
    <input type="radio" name="phone" ng-model="phone.IsDefault" />
</div>

I would like whichever radio is checked to update the model accordingly - this is not happening. On page load, nothing is checked. I can use ng-checked - but without ng-model it wont bind back to the array. Am I missing something simple or am I stuck writing an ng-change event to manually update the array?

As of now, I wrote a ng-change event as well, it currently looks like:

ng-model="phone.IsDefault" ng-value="true" ng-change="newPhoneSelected($index)"

$scope.newPhoneSelected = function (index) {
    for (var i = 0; i < $scope.phones.length; i++) {
        if (i == index) $scope.phones[i].IsDefault = true;
        else $scope.phones[i].IsDefault = false;
    }
}

ng-value... it is radio button they work based on the ng-value — Dalorzo
– Dalorzo, Commented May 22, 2014 at 21:51
Have tried using ng-true-value="true" and ng-false-value="false" - no luck - binding does not happen — tymeJV
– tymeJV, Commented May 22, 2014 at 21:52

Dalorzo · Accepted Answer · 2014-05-22 22:37:02Z

2

You are missingng-value... it is radio button they work based on value to mark a value as selected. You need either [value="" | ng-value=""]

<input type="radio"
       ng-model=""
       [value="" |
       ng-value=""]>

Like:

 <input type="radio" ng-value="true" name="boolean" ng-model="myValue" /> True
 <input type="radio" ng-value="false" name="boolean"  ng-model="myValue" /> False

Here is a plunker demo

Or with strings values:

$scope.myValue = 'Car'

html

 <input type="radio" ng-value="'Car'" name="string1" ng-model="myValue" /> Car
 <input type="radio" ng-value="'Airplane'" name="string1"  ng-model="myValue" /> Airplane

Here is the second demo

This is probably the closest sample to what you have:

http://jsfiddle.net/JbMuD/

edited May 22, 2014 at 22:37

answered May 22, 2014 at 21:52

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tymeJV Over a year ago

ng-false-value="false" ng-true-value="true" ng-model="phone.IsDefault" - No change.

tymeJV Over a year ago

My radios are within a repeater tho - so setting one value to false isn't an option

Dalorzo Over a year ago

@tymeJV you are missing the point ng-model="myValue" let's say 'Car' only will mark selected the radio button with value="Car"

a better oliver · Accepted Answer · 2014-05-23 08:47:42Z

0

A radio button is used to select one out of many values. You want to change the property of one item (isDefault = true) and simultaneously of another one (isDefault = false).

The semantically correct way would be to have some kind of defaultPhone value:

<div ng-repeat="phone in phones">
  <input type="radio" name="phone" ng-model="temp.defaultPhone" ng-value="phone"/>
</div>

Since your model requires that each phone "knows" itself wether it's default or not, you can add a listener:

$scope.$watch('temp.defaultPhone', function(defaultPhone) {
  $scope.phones.forEach(function(phone) {
    phone.isDefault = phone === defaultPhone;
  });
});

Here's a working example.

answered May 23, 2014 at 8:47

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular - Binding checkboxes to ng-model from ng-repeat

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related