Question

有没有办法可以在点击它时取消选择单选按钮？我使用的是AngularJS 1.4.4。使用我在这里找到的解决方案之一，我添加了一个ng-click事件，但它不起作用。

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

在控制器中，我有以下代码。以下＆＃34; if＆＃34;条件总是变为真，因此每当我尝试选择收音机时，它总是设置为假。我的目标是在点击它时取消选择单选按钮（如果已经选中）。

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

Answer 1

按照设计，单选按钮不应该被取消选择。我会考虑使用复选框。 https://ux.stackexchange.com/questions/13511/why-is-it-impossible-to-deselect-html-radio-inputs

Answer 2

以下代码有效：

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 - 取消选择单选按钮

2 个答案: