AngularJS - 取消选中单选按钮答案

【问题标题】：AngularJS - uncheck radio buttonAngularJS - 取消选中单选按钮
【发布时间】：2016-01-23 05:29:52
【问题描述】：

以下 JSFiddle 允许我取消选择单选按钮选择。

我正在使用 AngularJS 1.4，并且在这里的一篇文章中，我读到上面的 JSFiddle 不适用于 Angular 1.3+ 版本。没错，当我在上面的小提琴中实现代码时它不起作用。如何让此功能与我的版本一起使用？

以下是我的代码。

foreach (var part in Model.ChildParts)
{
  <div class="radio  col-md-12">
    <input type="radio"
           id="@Model.FieldName"
           name="@Model.FieldName"
           ng-model="gPA(@Model.Id).value"
           value="@((part as BaseInputPartVM).GetStringValue())"
           ng-click="uncheck($event, @Model.Id)" />
  </div>
 }

在我的控制器中，

$scope.uncheck = function (event, partId) {
      if ($scope.gPA(partId).value == event.target.value)
          $scope.gPA(partId).value = false
}

此代码用于取消选择（取消选中）单选按钮选择。但是，基本的单选按钮选择不起作用，我无法选择任何单选，因为上面的 if 条件总是变为 true。

有没有办法检查以前选择的单选值和新选择的值？为了使上述功能正常工作，我需要访问以前和新的无线电选择值进行比较。我已经查看了 ng-model、ng-change 并且它们都获取了当前无线电选择的值，但我还需要知道之前选择的值。

【问题讨论】：

预期的功能究竟是什么..？
对于单选按钮，一旦选择了单选，您只能将单选选择更改为新值，但不允许取消选择。我也需要取消选择才能工作。
你试过plnkr.co 吗？我已经用 angular 1.4.7 测试了我自己的 plunker - ex/plnkr.co/edit/UZxdTNOk4Ux2i49jejEV?p=info

标签： javascript jquery angularjs radio-button

【解决方案1】：

好的。我想我的问题得到了答案......对于输入收音机，我添加了 ng-mouseup 事件以在单击之前捕获收音机选择的先前值。另外，我在页面上添加了一个隐藏变量来存储这个以前的单选按钮选择的值。然后在 ng-click 事件中，我将根据当前选择的值检查之前选择的值。如果之前的值和当前的值相同，我会将值设置为 null 或 false，以取消选中选择。

foreach (var part in Model.ChildParts)
{
  <div class="radio  col-md-12">
    <input type="radio"
           id="@Model.FieldName"
           name="@Model.FieldName"
           ng-model="gPA(@Model.Id).value"
           value="@((part as BaseInputPartVM).GetStringValue())"
           ng-mouseup = "setPreviousSelectedValue(@Model.Id)"
           ng-click="uncheck($event, @Model.Id)" />
  </div>
}
<input type="hidden" id="previousRadioSelection" name="previousRadioSelection" ng-model="previousRadioSelection" value="" />

在控制器中，

//set previous selected value of radio button      
$scope.setPreviousSelectedValue = function (partId) {
    $scope.previousRadioSelection = $scope.gPA(partId).value;
}

//uncheck radio button      
$scope.uncheck = function (event, partId) {
    if ($scope.previousRadioSelection == event.target.value)
        $scope.gPA(partId).value = null;
}

【讨论】：