Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

angularjs

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.

like image 304
WalterV Avatar asked Apr 05 '13 12:04

WalterV


People also ask

How to set default value in radio Button in AngularJS?

By using ng-init, ng-show and ng-model properites we can set default value and we can show or hide div using AngularJS.

What is the default value of radio button?

The defaultChecked property returns the default value of the checked attribute. This property returns true if the radio button is checked by default, otherwise it returns false.


1 Answers

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

like image 128
Arun P Johny Avatar answered Sep 19 '22 11:09

Arun P Johny