AngularJs Radio button list persist checked state to model

Question

Better explain with a plunker

http://plnkr.co/edit/m8cvxA?p=preview

In a settings page that i work, Admin can set what defaults should apply for which site. In the plunker when you change your selection in the radio buttons and click save button. Check the console log data

1. Why aren't the selection of radio buttons maintained in the Users object?

2. What should i do to persist the state ( the right way)?

Answer 1

ngChecked only ties to the view, it does not update the model (http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngChecked). You want to use an ng-model in order to bind your result to the model.

Check out this documentation on the Angular radio button: http://docs.angularjs.org/api/ng.directive:input.radio

I've copied the key piece here:

  <form name="myForm" ng-controller="Ctrl">
     <input type="radio" ng-model="color" value="red">  Red <br/>
     <input type="radio" ng-model="color" value="green"> Green <br/>
     <input type="radio" ng-model="color" value="blue"> Blue <br/>
     <tt>color = {{color}}</tt><br/>
 </form>

Note than instead of using multiple booleans you'll use a single variable that will be set to whatever value is checked (since only one can be checked in a radio button).

Answer 2

In a nutshell, radio buttons are used to assign one of multiple values to a single variable.

What you're trying to do is assign true or false to multiple values.

So you can:

• A) Use a radio button that assigns "1 day", "6 months", "1 year" to a field on the User
• B) You have to go and write some logic on the controller (or on a directive) that will find out which radio button is checked and then go and programmatically assign true and false to the proper fields on User.options.