Angularjs: Update model when radio button selection changes

Question

I'm using Angularjs and I have two radio buttons with the same name access and different model fields model.field1 and model.field2, so I need to update the model when selection change, initially model.field1 and model.field2 are set to false, and I want to set the model value to true when cheched and false when not checked, how can I do that?

<input type="radio" id="r1" data-ng-model="model.field1" name="access"><span>R 1</span>
<input type="radio" id="r2" data-ng-model="model.field2" name="access"><span>R 2</span>

I appreciate any help, thanks

Dested · Accepted Answer · 2014-07-15 23:59:40Z

1

I believe the preferred way to do this is with a single variable, and the value attribute, like this:

<input type="radio" id="r1" data-ng-model="model.field1" value="1" name="access"><span>R 1</span>
<input type="radio" id="r2" data-ng-model="model.field1" value="2" name="access"><span>R 2</span>
{{model.field1}}

This will set the variable model.field1 to 1 or 2 depending on which is selected. It is undefined if nothing is selected. Let me know if this will work for your use case.

answered Jul 15, 2014 at 23:59

Dested

6,46112 gold badges54 silver badges73 bronze badges

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

3 Comments

Ragnar Over a year ago

Thanks @Dested, I know that way but in this case I have two variables for representing separated attributes in order to give access to users for example: user.readWrite and user.readOnly and a single variable is not so useful for me. Have you any other idea? Thanks a lot

Dested Over a year ago

The only way I can think off of hand is to set value to "true" in both cases, default them both to false, and use a series of watches on all of the applicable fields to set them to false when any one of them gets set to true... Another option would be to use 0 for readOnly, 1 for readWrite, and to a watch on THAT value, and set the actual variables representing the accessibility appropriately.

Ragnar Over a year ago

Thanks Dested, Your suggestion was very useful for me. I solved the problem watching the variable value and setting the actual variables appropriately. Cheers!!

MBielski · Accepted Answer · 2014-07-16 00:03:31Z

1

You need to set them with a single scope variable and ng-value as shown in the Angular docs (https://docs.angularjs.org/api/ng/input/input%5Bradio%5D).

<input type="radio" id="r1" ng-model="model.field1" ng-value="1" name="access"><span>R 1</span>
<input type="radio" id="r2" ng-model="model.field1" ng-value="2" name="access"><span>R 2</span>

answered Jul 16, 2014 at 0:03

MBielski

6,6103 gold badges36 silver badges46 bronze badges

1 Comment

Ragnar Over a year ago

Thanks @MBielski, I know that way but in this case I have two variables for representing separated attributes in order to give access to users for example: user.readWrite and user.readOnly and a single variable is not so useful for me. Have you any other idea? Thanks a lot

Collectives™ on Stack Overflow

Angularjs: Update model when radio button selection changes

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related