AngularJS取消选中单选按钮

wi3ka0sx 于 2022-10-24 发布在 Angular

关注(0)|答案(2)|浏览(271)

我曾尝试使用ng-dblick、$Event等解决方案，但似乎都不适用于我。
我在一个表中的NG-Repeat中有两个单选按钮。我有一个用于设置哪个单选按钮应处于活动状态的字段。这只适用于NG-Change，但我也希望能够取消选择任何单选按钮。
NG-Change不会在这上面触发，所以我也为NG-Click和乱七八糟的代码Works添加了一个，但有没有更干净的方法来做这件事呢？

<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;
        ...
     });
    ...

angularjs

来源：https://stackoverflow.com/questions/41238563/angularjs-uncheck-radio-button

2条答案

按热度按时间

d8tt03nd1#

单选按钮一次只能选择一个，并且一旦被选中，用户就不能取消选中它们(除非您已经尝试过以编程方式取消选中)。或许，一个更干净的方法的例子应该是：

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

赞(0）回复(0）举报 2022-10-24

agxfikkp2#

请查看文档

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

赞(0）回复(0）举报 2022-10-24

我来回答

AngularJS取消选中单选按钮

2条答案

相关问题

热门标签

最新问答