AngularJs How to set radio button checked based on model

Question

I have a model returning in the storeLocations object with a isDefault value  if isDefault returns true  I wan t to set that radio button in the group as checked   Not sure if I need to do a  each data  function index value  and iterate through each object returned or if there s an easier way to do this using angular constructs   Object   storeLocations              more values    isDefault  true        Markup        lt tr ng-repeat  location in merchant storeLocations  gt           lt td gt   location name   lt  td gt           lt td gt   location address address1   lt  td gt           lt td gt   location address address2   lt  td gt           lt td gt   location address city   lt  td gt           lt td gt   location address stateProvince   lt  td gt           lt td gt   location address postalCode   lt  td gt           lt td gt   location address country   lt  td gt           lt td gt   location website   lt  td gt           lt td gt   location zone   lt  td gt           lt td gt  lt input type  radio  ng-model  location isDefault  value    location isDefault    name  isDefault group  gt  lt  td gt

User · Answer

If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same value and ng-model, is checked automatically.

<input type="radio" value="1" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="2" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="3" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="4" ng-model="myRating" name="rating" class="radio">

If the value of myRating is "2" then second radio button is selected.

User · Answer

Just do something like this  lt input type  radio  ng-disabled  loading  name  dateRange  ng-model  filter DateRange  value  1  ng-checked   filter DateRange    1    gt

User · Answer

As discussed somewhat in the question comments  this is one way you could do it    When you first retrieve the data  loop through all locations and set storeDefault to the store that is currently the default    In the markup   lt input     ng-model   parent storeDefault  value    location id    gt  Before you save the data  loop through all the merchant storeLocations and set isDefault to false except for the store where location id compares equal to storeDefault    The above assumes that each location has a field  e g   id  that holds a unique value   Note that  parent storeDefault is used because ng-repeat creates a child scope  and we want to manipulate the storeDefault parameter on the parent scope   Fiddle

User · Answer

Use ng-value instead of value   ng-value  true    Version with ng-checked is worse because of the code duplication

User · Answer

One way that I see more powerful and avoid having a isDefault in all the models is by using the ng-attributes ng-model  ng-value and ng-checked   ng-model  binds the value to your model   ng-value  the value to pass to the ng-model binding   ng-checked  value or expression that is evaluated  Useful for radio-button and check-boxes   Example of use  In the following example  I have my model and a list of languages that my site supports  To display the different languages supported and updating the model with the selecting language we can do it in this way    lt  -- Radio -- gt   lt div ng-repeat  language in languages  gt      lt div gt       lt label gt          lt input ng-model  site lang               ng-value  language               ng-checked   site lang    language                name  localizationOptions               type  radio  gt          lt span gt    language    lt  span gt        lt  label gt     lt  div gt    lt  div gt   lt  -- end of Radio -- gt    Our model site lang will get a language value whenever the expression under evaluation  site lang    language  is true   This will allow you to sync it with server easily since your model already has the change

User · Answer

Ended up just using the built-in angular attribute ng-checked  model

[javascript] AngularJs: How to set radio button checked based on model

Examples related to javascript

Examples related to angularjs

Examples related to radio-group