Max Lynn Max Lynn - 2 months ago 9
AngularJS Question

Angular - how to force a radio to be checked on page load

Simple question I hope...

How do I enable on page load that the first radio is checked with the html below?

<div class="app-margin-bottom app-margin-left">
<input type="radio"
value="pdf"
ng-model="resource.type"
ng-click="enableUrlInput()"
name="resourceType"
required>
<span class="app-margin-right">PDF</span>
<input type="radio"
name="resourceType"
ng-model="resource.type"
ng-click="enableUrlInput()"
value="url"
required> URL
</div>


I have tried using checked as an attr but this gets ignored. I've also played around with setting resource.type to 'pdf' with the directive ng-checked.

Answer

This should work

<div ng-controller="MyCtrl">
  <div class="app-margin-bottom app-margin-left">
                <input type="radio"
                       value="pdf"
                       ng-checked="true"
                       ng-model="resource.type"
                       ng-click="enableUrlInput()"
                       name="resourceType"
                       required>
                    <span class="app-margin-right">PDF</span>
                <input type="radio"
                       name="resourceType"
                       ng-model="resource.type"
                       ng-click="enableUrlInput()"
                       value="url"
                       required> URL
            </div>
</div>

JSFiddle: http://jsfiddle.net/Lvc0u55v/9955/