AngularJS取消选中单选按钮

Question

I have tried to look at other solutions for this with ng-dblclick, $event etc but none of them seems to works for me.

I have two radio buttons inside a ng-repeat in a table. I have one field for setting which radio button should be active. This works fine with just ng-change but I want to be able to deselect any of the radio buttons aswell.

Ng-change doesn't fire on this so I added one for ng-click aswell and the messy code under works but is it any cleaner way of doing this?

<td>
    <div class="inline-group">
        <label class="radio">
            <input type="radio" name="stage{{$index}}" ng-change="save(item, false)" ng-click="save(item, true)" ng-model="item.Stage" value="Started">
            <i></i> Started
        </label>
        <label class="radio">
            <input type="radio" name="stage{{$index}}" ng-change="save(item, false)" ng-click="save(item, true)" ng-model="item.Stage" value="Completed">
            <i></i> Completed
        </label>
    </div>
</td>

Controller

var runOnce = false;

$scope.save = function (item, uncheck) {
    if (runOnce) {
        return;
    }

    if (uncheck) {
        item.stage = null;
    }
    else {
        runOnce = true;
    }

    ...
    .$promise.then(function (result) {
        ...
        runOnce = false;
        ...
     });
    ...

Answer 1

Look at the documentation

<div class="inline-group">
        <label class="radio">
            <input type="radio" name="stage{{$index}}" ng-model="item.Stage" value="true">
            <i></i> Started
        </label>
        <label class="radio">
            <input type="radio" name="stage{{$index}}" ng-model="item.Stage" value="false">
            <i></i> Completed
        </label>
    </div>

And for a true / false selection, use a check box instead of a radio buttton

Updated

With an enum, in your scope:

$scope.stageEnum = { Started: 0, Completed: 1 };

your view :

<div class="inline-group">
            <label class="radio">
                <input type="radio" name="stage{{$index}}" ng-model="item.Stage" value="stageEnum.Started">
                <i></i> Started
            </label>
            <label class="radio">
                <input type="radio" name="stage{{$index}}" ng-model="item.Stage" value="stageEnum.Completed">
                <i></i> Completed
            </label>
        </div>

Answer 2

Radio buttons can be selected only one at a time and cannot be unchecked by the user once they are checked (unless you do programmatically, as you have tried). Perhaps, an example for a more cleaner approach would have been:

<input type="radio" ng-model="checked" value="500" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1000" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1500" ng-click="uncheck($event)" />

In your controller:

$scope.uncheck = function (event) {
    if ($scope.checked == event.target.value)
        $scope.checked = false
}

DEMO: http://jsfiddle.net/8s4m2e5e/3/