AngularJS binding radio buttons to booleans across multiple objects

Question

I am trying to bind an array of objects to sets of radio button groups. I have it to the point where it generates the groups based on the model and pre-selects the correct radio button based on the boolean selected, however I cannot figure out how to toggle the value of the bound item to true and false when the radio button value changes. Basically, I would like these to function like mutually exclusive checkboxes. I could probably do this with actual checkboxes, but obviously radio buttons are ideal, as this is their intended purpose.

JSFiddle for your convenience: http://jsfiddle.net/uv9mwkwd/5/

HTML:

<div ng-app ng-controller="Extensions">
    <div ng-repeat="propertyGroup in propertyGroups">
        {{propertyGroup.label}}
        <div ng-repeat="prop in propertyGroup.properties">
            <input type="radio" ng-model="prop.selected" name="prop{{propertyGroup.alias}}" ng-value="true" /> {{prop.value}}
        </div>
    </div>
</div>

Script:

function Extensions($scope) {
  $scope.propertyGroups = [
    {'label': 'Property 1',
     'alias': 'property1',
     'properties': [{value: 'Value 1', selected: true},{value: 'Value 2', selected: false}]},
    {'label': 'Property 2',
     'alias': 'property2',
     'properties': [{value: 'Value 1', selected: false},{value: 'Value 2', selected: true}]}
  ];
    console.debug($scope.propertyGroups);
}

Mark Pieszak - Trilon.io · Accepted Answer · 2015-02-25 17:08:27Z

1

The problem is you're trying to connect the "selected" value individually to each individual radio button. Instead, have this in the propertyGroup portion of your model.

jsFiddle example

$scope.propertyGroups = [
    { label : 'Property 1',
      alias : 'property1',
      selected : 'Value 1', // <---------- this stores which value is checked
      properties: [{value: 'Value 1'},{value: 'Value 2'}]},
    { label : 'Property 2',
      alias : 'property2',
      selected : 'Value 2', // <---------- this stores which value is checked
      properties : [{value: 'Value 1'},{value: 'Value 2'}]}

];

While in your HTML, notice your ng-model is instead looking at the overall group of radio buttons to match the "value"

   <div ng-repeat="prop in propertyGroup.properties">

        {{ propertyGroup.selected }} 
        <!-- ^ this is just so you can see it change the model-->

        <input type="radio" 
               ng-model="propertyGroup.selected" 
               name="prop{{propertyGroup.alias}}" 
               ng-value="prop.value" /> {{prop.value}}
    </div>

answered Feb 25, 2015 at 17:08

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

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

2 Comments

Keith Over a year ago

Fortunately, I am able to suit the model to my own needs, so this will work for me, however I am still curious how I could accomplish this without adjusting the model, such as in a scenario where the model I receive is from a third party and POSTed updates would require me to POST the same model structure.

Mark Pieszak - Trilon.io Over a year ago

Unfortunately that's the only way... you'd have to create and update the model on your own manually if you'd want to add that kind of functionality.

Collectives™ on Stack Overflow

AngularJS binding radio buttons to booleans across multiple objects

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related