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
}

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

AngularJS取消选中单选按钮

2 个答案: