AngularJS取消选中单选按钮

Question

我曾尝试使用 ng-dblclick、$event 等查看其他解决方案，但它们似乎都不适合我。

我在表格的 ng-repeat 中有两个单选按钮。我有一个字段用于设置哪个单选按钮应该处于活动状态。仅使用 ng-change 即可正常工作，但我也希望能够取消选择任何单选按钮。

Ng-change 不会触发此操作，因此我也添加了一个用于 ng-click 的代码，并且乱七八糟的代码可以正常工作，但这样做有没有更简洁的方法？

<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>

控制器

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

看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>

对于真/假选择，请使用复选框而不是单选按钮

更新

使用枚举，在您的范围内：

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

你的看法：

<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

单选按钮一次只能选择一个，并且一旦选中，用户就不能取消选中（除非您以编程方式进行，如您所尝试的那样）。也许，更清洁方法的一个例子是：

<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)" />

在您的控制器中：

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

演示：http://jsfiddle.net/8s4m2e5e/3/