How to bind to complex objects with radios and checkboxes in AngularJS?

Question

Say we have a set of projects exposed via the Project service:

{ id: '123', name: 'Yeoman', watchers: '1233', ... }
{ id: '123', name: 'Grunt', watchers: '4343', ... }

Then, we have a form to choose your favorite project:

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project.id}}") {{project.name}}

This sets choices.favoriteProject to the id value of the chosen project. Often, we need to access the related object, not just the id:

John's favorite project:
{{Project.get(data.favoriteProject).name}}

What I'm looking for is a way to bind the radios and checkboxes straight to the object itself, not the id, so we could do

John's favorite project:
{{data.favoriteProject.name}}

instead. This is possible with select directive via ng-options, but how can we do this with radios and checkboxes? I'd still like to use the ids for matching instead of references, if possible.

To clarify, here's an example what I'm looking for

Select favorite project:
%label.radio(ng-repeat="project in Project.query()")
  %input(type="radio" ng-model="data.favoriteProject" value="{{project}}" ng-match="id") {{project.name}}

It says: "Please bind data.favoriteProject to the actual project object and use the id to check if they match (instead of references)".

Michelle Tilley · Accepted Answer · 2013-06-18 23:33:13Z

15

[Update]

I've completely changed my answer after discovering the ngValue directive, which appears to be undocumented. It allows you to bind objects instead of just strings as values for ngModel on the radio button inputs.

<label ng-repeat="project in projects">
  <input type="radio" ng-model="data.favoriteProject"
    ng-value="project">{{project.name}}</input>
</label>

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

This uses references to check rather than just IDs, but I think in most cases, this is what people will be looking for. If you do very strictly only want to match based on IDs, you can use the [Old Answer], below, or even better, just create a function--e.g. projectById(projectId) that you can use for looking up a project based on its ID.

I've updated the JSFiddle to demonstrate: http://jsfiddle.net/BinaryMuse/pj2GR/

[Old Answer]

Perhaps you can utilize the ng-change attribute of the radio button directive to achieve what you want. Consider this HTML:

<p>Select your favorite project:</p>
<label ng-repeat="project in projects">
  <input type="radio" ng-model="data.favoriteProjectId" value="{{project.id}}"
         ng-change="data.favoriteProject = project">
    {{project.name}}
  </input>
</label>

<p>Your favorite project is {{data.favoriteProject.name}}.</p>

You could also call a function inside ng-change, for example setfavoriteProject(project)--but I did not do that here for simplicity's sake.

Here is a working jsFiddle to demonstrate the technique: http://jsfiddle.net/BinaryMuse/pj2GR/7/

edited Jun 18, 2013 at 23:33

answered Jan 16, 2013 at 6:20

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

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

8 Comments

randomguy Over a year ago

Thank you! I really like this solution. It's simple, yet it works neatly! I'll leave the question open for other solutions for now. The problem with this is that there's duplication of data (the id) and we have to manage setting the value ourselves.

randomguy Over a year ago

Why use projects[$index] instead of just the project object?

Michelle Tilley Over a year ago

I made that refactoring in the jsFiddle, but forgot to update the post. Thanks!

randomguy Over a year ago

There's a slight problem with checkboxes with this approach. ng-change fires on check AND uncheck so the favoriteProject gets set even if we are unchecking.

Dogweather Over a year ago

Interesting that the ng-model is more or less a throw-away here.

|

hugo der hungrige · Accepted Answer · 2013-02-28 22:07:44Z

1

No ng-change needed (and I'm not sure, if it is a good practise to write inline-code like this. On the other hand angulars directives are not too far from it theirselves). Why not just do something like this (works with ng-repeat as well):

Fiddle: http://jsfiddle.net/JohannesJo/VeZxh/3/

Code:

<body ng-app="app">
<div ng-controller='controller'>
<input type = "radio" ng-model = "oSelected"  value = "{{aData[0]}}">
<input type = "radio" ng-model = "oSelected"  value = "{{aData[1]}}">
<div>test:     {{oSelected}}</div>
</div>
</body>


app = angular.module('app',[]);

app.controller('controller', function($scope){
$scope.aData = [
    {o:1},
    {o:2}
];
$scope.oSelected = {};
});

Edit: I maybe should mention that this doesn't work for checkboxes, as value will either be true or false. Also a shared model will lead to all checkboxes either being checked or unchecked at the same time.

edited Feb 28, 2013 at 22:07

answered Feb 28, 2013 at 21:08

hugo der hungrige

13k9 gold badges60 silver badges86 bronze badges

1 Comment

genuinefafa Over a year ago

see ng-value solution, it is pretty much flexible

Collectives™ on Stack Overflow

How to bind to complex objects with radios and checkboxes in AngularJS?

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related