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:

    <tr ng-repeat="location in merchant.storeLocations">
        <td>{{location.name}}</td>
        <td>{{location.address.address1}}</td>
        <td>{{location.address.address2}}</td>
        <td>{{location.address.city}}</td>
        <td>{{location.address.stateProvince}}</td>
        <td>{{location.address.postalCode}}</td>
        <td>{{location.address.country}}</td>
        <td>{{location.website}}</td>
        <td>{{location.zone}}</td>
        <td><input type="radio" ng-model="location.isDefault" value="{{location.isDefault}}" name="isDefault_group"></td>

Do you need an isDefault on every store location object? It seems it might be easier to remove that property from every object and just have a single storeDefault property. Then . This of course assumes/requires that each location has a field (e.g., id) that holds a unique value. — Mark Rajcok, Jan 25 '13 at 21:59
I like the data structure you proposed better, but I'd still need to show the default store as checked when returning the storeLocation objects. — Christopher Marshall, Jan 25 '13 at 22:07
@joragupra Considering this question was asked in 2013, your linked answer should be marked a duplicate of this if anything. — Christopher Marshall, Jul 01 '15 at 15:28

score 76 · Accepted Answer · answered Nov 14 '13 at 13:26

76

Use ng-value instead of value.

ng-value="true"

Version with ng-checked is worse because of the code duplication.

answered Nov 14 '13 at 13:26

ivan.a.bovin

1,133
10
17

1

Is that from a recent release? I don't think that was available in the version I was using at the time. – Christopher Marshall Nov 14 '13 at 16:16
I use AngularJS v1.1.5. – ivan.a.bovin Nov 18 '13 at 03:32
3

This is the correct answer. Use 'ng-value' and 'ng-model' to correctly check/uncheck the button and to maintain the two way binding. – DhafirNz Mar 21 '14 at 00:38
@DhafirNz Just used this again, changing to correct answer. – Christopher Marshall Aug 14 '14 at 17:42
8

doesn't work for me .. instead `ng-checked` has worked – TooCool Nov 08 '16 at 11:33
Idem for me. The only thing that works for me was ng-checked. Not ng-model nor ng-value. – Agorreca Sep 25 '19 at 20:39

Rubi saini · Answer 2 · 2017-02-22T11:06:01.467

61

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.

edited Feb 22 '17 at 11:06

answered Jul 04 '15 at 08:57

Rubi saini

2,515
23
21

How do you set the first one selected when the model is empty? I tried ng-checked and ng-init but doesn't work. Any ideas? – hogan Nov 26 '15 at 22:10
1

Hi, Why are you not set the default value of your model on controller load or in ng-init method? If you set the default value of your model on controller load like "myRating" = 1 then first radio button will show selected. – Rubi saini Dec 01 '15 at 04:33
2

What version of Angular? At least in 1.2, ng-model combined with "value" does NOT set one of the radio buttons to checked state when the page loads. Only _after_ you select one does the two-way binding start to work. Edit: Actually, it works with numbers, but not if the value is a string. – tandrewnichols May 09 '16 at 14:37
@tandrewnichols I was having a problem with the radio button not being selected initially upon page load (even though I could see that ng-model and ng-value were the same for that radio button) and it turns out that one of the values was a number and one was a string, so Angular (apparently now using === unfortunately) determined they were not equal. I just wrapped one of the values in Number() where I was getting it from and all was fine. And I have seen a plunkr (sorry, lost the url) that shows this working with a string as well. Oh, also use 'ng-value' instead of 'value'! – Roger Mar 04 '17 at 05:05

score 28 · Answer 3 · answered Nov 24 '15 at 09:30

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.

<!-- Radio -->
<div ng-repeat="language in languages">

  <div>
    <label>

      <input ng-model="site.lang"
             ng-value="language"
             ng-checked="(site.lang == language)"
             name="localizationOptions"
             type="radio">

      <span> {{language}} </span>

    </label>
  </div>

</div>
<!-- end of Radio -->

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.

score 22 · Answer 4 · answered Mar 15 '13 at 20:22

22

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

answered Mar 15 '13 at 20:22

Christopher Marshall

10,678
10
55
94

2

Hmm, this is just strange. Adding `checked="checked"` does not work but `ng-checked="true"` works and the only thing it makes is adding `checked="checked"` to the radio button. – ivkremer May 14 '14 at 09:37
1

My model at the time was a boolean so it worked out for me :\ – Christopher Marshall May 22 '14 at 21:32
@Kremchik This is due to Angular digestion cycle. It first searches for directives during html parsing and then after assigning event listeners on the DOM and $watch-es on the models it compiles everything, which also involves generating attributes over your html markup. That is why if you use [code]checked="checked"[/code] angular will simply override it, simply because as angular team puts it: "Angular likes to be in control of your DOM". Hope it explains behaviour a bit – Mark Karwowski Jun 26 '14 at 06:03

score 2 · Answer 5 · answered Jan 26 '13 at 01:24

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: <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
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.

score 1 · Answer 6 · answered Jun 21 '19 at 02:27

1

Just do something like this,<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>

answered Jun 21 '19 at 02:27

tyne

97
5

AngularJs: How to set radio button checked based on model

6 Answers6

Linked