How to set the default value for radio buttons in AngularJS?

Question

I need to make a system to change the total price by number of tickets selected. I created some radio buttons to choose the number of ticket. The ploblem is that the default value is unset and the result is null on loading.

<input type="radio" ng-model="people" value="1" checked="checked"><label>1</label>
<input type="radio" ng-model="people" value="2"><label>2</label>
<input type="radio" ng-model="people" value="3"><label>3</label>
<ul>
  <li>{{10*people}}€</li>
  <li>{{8*people}}€</li>
  <li>{{30*people}}€</li>
</ul>

Please see my jsfiddle.

side note for anyone getting here from using {{$index}} for value, your model needs to stringify the initial value '1'. — user420667
– user420667, Commented Dec 12, 2016 at 3:28

Arun P Johny · Accepted Answer · 2013-04-05 12:21:13Z

118

Set a default value for people with ngInit

<div ng-app>
    <div ng-init="people=1" />
        <input type="radio" ng-model="people" value="1"><label>1</label>
        <input type="radio" ng-model="people" value="2"><label>2</label>
        <input type="radio" ng-model="people" value="3"><label>3</label>
    <ul>
        <li>{{10*people}}€</li>
        <li>{{8*people}}€</li>
        <li>{{30*people}}€</li>
    </ul>
</div>

Demo: Fiddle

answered Apr 5, 2013 at 12:21

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

6 Comments

goh Over a year ago

you can also do so inside the controller by setting scope.people=1, which is the recommended way described in docs.angularjs.org/api/ng.directive:ngInit

mrsus Over a year ago

@Arun, What if values have characters instead of digit. Then how would be the code for ng-init look like?

Arun P Johny Over a year ago

@MrSuS people='chars'

Dave Alperovich Over a year ago

using ng-init is bad practice. this approach is only effecitive for a Form being populated for the 1st time. If you have values and assigned them to model binders, ng-init will overwrite your values.

user841760 Over a year ago

what if I used ng-value and for default radio I want to use ng-value = "" because that model I use to filter on a list later on, and the default filter shouldn't filter on anything, hence empty string?

|

aish · Accepted Answer · 2014-10-14 06:40:30Z

25

<div ng-app="" ng-controller="myCntrl">    
        <input type="radio" ng-model="people" value="1"/><label>1</label>
        <input type="radio" ng-model="people" value="2"/><label>2</label>
        <input type="radio" ng-model="people" value="3"/><label>3</label>
</div>
<script>
    function myCntrl($scope){
        $scope.people=1;
    }
</script>

answered Oct 14, 2014 at 6:40

aish

6231 gold badge7 silver badges11 bronze badges

Comments

user3276940 · Accepted Answer · 2016-03-27 02:07:05Z

15

why not just ng-checked="true"

answered Mar 27, 2016 at 2:07

user3276940

4877 silver badges18 bronze badges

2 Comments

Tristan Over a year ago

Because it would check the radio button visually, but would not set the value of "people" like if u had click on the radio button through a browser.

shanemgrey Over a year ago

The answers section is not a good place for questions. This would be better in comments on the accepted answer.

Sonal · Accepted Answer · 2018-04-08 11:55:52Z

1

In Angular 2 this is how we can set the default value for radio button:

HTML:

<label class="form-check-label">
          <input type="radio" class="form-check-input" name="gender" 
          [(ngModel)]="gender" id="optionsRadios1" value="male">
          Male
</label>

In the Component Class set the value of 'gender' variable equal to the value of radio button:

gender = 'male';

answered Apr 8, 2018 at 11:55

Sonal

1882 silver badges12 bronze badges

Comments

Blue · Accepted Answer · 2016-10-04 15:37:37Z

-6

<input type="radio" name="gender" value="male"<%=rs.getString(6).equals("male") ? "checked='checked'": "" %>: "checked='checked'" %> >Male
               <%=rs.getString(6).equals("male") ? "checked='checked'": "" %>

edited Oct 4, 2016 at 15:37

Blue

23k7 gold badges69 silver badges102 bronze badges

answered Oct 4, 2016 at 14:57

Umesh

1

Collectives™ on Stack Overflow

How to set the default value for radio buttons in AngularJS?

5 Answers 5

6 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related