How to use an object as ng-value of a radio button?
Solution 1
You can have an object as the value in ng-value
:
<div ng-app>
<input type="radio" ng-model="modelObject" ng-value="{val:1, text:'text'}"/>
<p>>{{modelObject|json}}<</p>
</div>
The values in ng-value
can also be dynamic as well per request:
<div ng-app ng-init="opt={id: 1, text: 'some text'}">
<input type="radio" ng-model="modelObject" ng-value="{val:opt.id, text:opt.text}"/>
<p>>{{modelObject|json}}<</p>
</div>
Solution 2
You can use ng-value="option"
:
<input type="radio" model="data.modelObject" ng-value="option"/>
When you need id
you can have it from $scope.option.id
and when you need text
you can access it from $scope.option.text
. Check my answer here. Does this work for your case?
Comments
-
Sr.Richie over 1 year
Is there any way to use an object for ng-value of a radio button?
Imagine you have a radio button whose ng-model is an object, like this:
modelObject: {val:'', text:''}
And this would be the radio button:
<input type="radio" ng-model="data.modelObject" ng-value=""/>
Is there a way to do something like the following (obviously it doesn't work)
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
? Thanks
I know I can use the ng-change directive. I'm just wondering if what I am asking it's possible, it would be very smart
EDIT: as requested in the comments, I am giving a bit of extra info on my setup.
I want to save in the model both the value of the button and its label. So let's say I have an array in my controller called impactOptions and a ng-repeat directive to create the buttons:
<div ng-repeat="option in impactOptions" > <input type="radio" ng-model="data.modelObject.val" id="rbGroup{{option.id}} ng-value="option.id"/> <label for="rbGroup{{option.id}}">{{option.text}}</label> </div>
The problem with this setup is that in that way I'm only saving the value of the button, while I would like to also save it's label. I really need it later.
I'm looking for a way to do something like this
<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>
-
Sr.Richie almost 10 yearsThx for your help, but is there any way to have the values of the properties not hardcoded? If i try to something like: {val:option.id, text:option.text} angular crashes. Please look at the edit in my question to see exactly the scenario. Thanks again, is the second time you're helping me with angular :)
-
Brocco almost 10 yearsof course that is possible (jsfiddle.net/7Dgsx/2)
opt
is defined viang-init
so I didn't need to create a controller -
Sr.Richie almost 10 yearsthank you again. I don't understand where the problem is. If I try to use {val:opt.id, text:opt.text}, it crashes. I can use {val:{{option.id}} }, but if I try to use {val:{{option.id}}, text:{{option.text}}}, it crashes again. Sorry, I'm a very n00b with angular
-
Brocco almost 10 yearsNo problem, the first part looks good, but could cause issues if you have not defined the option object. You can set that object like I did via ng-unit, or in the controller, which is suggested... $scope.option = {id:5, text: 'abc'};
-
Sr.Richie almost 10 yearsoption is obviously defined in the ng-repeat directive, as you can see in the question code.... Argh!
-
Brocco almost 10 yearsYou are correct, my response was from my phone, just trying to help. Take a look at this plnkr as it shows this working: plnkr.co/edit/XWHldn8bcVGyCjaWd7z3?p=preview