CODEWITHSUNDEEP
javascriptangularjs
tymeJV
tymeJV

Reputation: 104795

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

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;
    }
}

Upvotes: 0

Views: 2638

Answers (2)

a better oliver
a better oliver

Reputation: 26848

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.

Upvotes: 0

Dalorzo
Dalorzo

Reputation: 20024

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/

Upvotes: 2

Related Questions