Clearing AngularJS Radio Buttons

by sunil puvvada

HTML

<p>
    This fiddle demonstrates how we can leverage AngularJS 
    and its model to create radio buttons that can be cleared,
    so they can be used on optional questions.
    There are two pairs of radio buttons to show how it 
    can work across multiple groups and with a default 
    setting.
</p>
<p>
    Tap clear link to clear radio button.
</p>
<div ng-app="myApp" ng-controller="Example">
    
    <!-- First pair of radio buttons -->
    <input type="radio" ng-model="test1" value="Sunil" tabindex="1" />
    <label for="radio1">One</label>
    <input type="radio" ng-model="test1" value="two" tabindex="2"/>
    <label for="radio2">Two</label>
    <a class="undo" ng-click="test1 = null">&otimes;</a>
    <p>{{test1}}</p>

    <hr />

    <!-- Second pair of radio buttons -->
    <input type="radio" id="radio3" ng-model="test2" value="one" checked="checked" />
    <label for="radio3">One</label>
    <input type="radio" id="radio4" ng-model="test2" value="two" />
    <label for="radio4">Two</label>
    <a class="undo" ng-click="test2 = null">&otimes;</a>
    <p>{{test2}}</p>

</div>

CSS

label {
    -webkit-user-select: none;
    -moz-user-select: none;    
    -ms-user-select: none;
    user-select: none;
}
.undo {
    cursor: pointer;
    color: lightgrey;
}

JavaScript

angular.module("myApp", []).controller("Example", ["$scope", function($scope) {
    $scope.test2 = "one"
}])