Mastering Web Application

Chapter 5

Using radio inputs

Radio buttons provide a fixed group of choices for a field. AngularJS makes this
really simple to implement: Just bind all the radio buttons in a group to the same
model field. The standard HTML value attribute is then used to specify what value
to put in the model when the radio is selected:

<label><input type="radio" ng-model="user.sex" value="male"> Male</

label>

<label><input type="radio" ng-model="user.sex" value="female">

Female</label>

Try it at http://bit.ly/14hYNsN.

Using select inputs

The select input directive allows you to create a drop-down list, from which the
user can select one or more items. AngularJS lets you specify options for the drop
down statically or from an array on the scope.

Providing simple string options

If you have a static list of options from which to select you can simply provide them
as option elements below the select element:

<select ng-model="sex">

<option value="m" ng-selected="sex=='m'">Male</option>

<option value="f" ng-selected="sex=='f'">Female</option>

</select>

Be aware that since the value attribute can only take a string, the value to which you
bind can only be a string.

If you want to bind to values that are not strings or you want your list

of options to be created dynamically from data, then use ngOptions

as follows.