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.
By using ng-init, ng-show and ng-model properites we can set default value and we can show or hide div using AngularJS.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With