Question

以下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，并且所有这些都获取了当前的无线电选择值，但我也需要知道之前选择的值。

Answer 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;
}

AngularJS - 取消选中单选按钮

1 个答案: