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

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

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

Answer 2

查看文档

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