AngularJS - 带有取消选择/取消选择的 ng-repeat 单选按钮答案

【问题标题】：AngularJS - ng-repeat radio buttons with deselect/unselectAngularJS - 带有取消选择/取消选择的 ng-repeat 单选按钮
【发布时间】：2016-05-24 22:31:57
【问题描述】：

我正在尝试为单选按钮创建一个 ng-repeat 块。我需要取消选择按钮。

这里是 ng-repeat 块的示例：

<div ng-repeat="role in roles" class="checkbox checkbox-inline checkbox-primary">
 <input id="{{ role.Value }}" ng-model="$parent.roleSelected" class="styled" type="radio" 
   name="{{ role.Group }}" value="{{ role.Value }}" />
 <label for="{{ role.Value }}">{{ role.Name }}</label>
</div>

编辑：客户要求提供通过单击相同按钮使用可取消选择的单选按钮的功能。这个问题是关于如何做，而不是是否应该做。

【问题讨论】：

如何取消选择？通过按钮？
否，可通过再次单击相同的单选按钮取消选择。就像一个复选框。我已经在下面发布了我的答案。谢谢！
不要那样做。人们期望单选按钮以不同的方式工作。这只会给您的用户带来非常糟糕的用户体验。
我同意，但这归结为一项要求。用户需要收音机只允许一个选择。但是，如果意外完成，他们需要取消选择功能，例如复选框。他们希望它看起来像复选框，您可以在我的 css 类定义中看到它......

标签： javascript angularjs radio-button ng-repeat deselect

【解决方案1】：

如果使用复选框，只有一个可选择项呢？

<div ng-repeat="role in roles" class="checkbox checkbox-inline checkbox-primary">
       <input id="{{ role.Value }}" ng-click="setRole(role.Value)" ng-checked="role.Value == roleSelected" class="styled" type="checkbox"
          name="{{ role.Group }}" value="{{ role.Value }}" />
       <label for="{{ role.Value }}">{{ role.Name }}</label>
</div>

以及控制器代码：

$scope.setRole = function(value)
{
  if ($scope.roleSelected != value) {
    $scope.roleSelected = value;
  }
  else {
    $scope.roleSelected = null;
  }
}

演示：

https://plnkr.co/edit/0ZhczYNp9mRPSHl6tOxS?p=preview

【讨论】：

【解决方案2】：

我做了一些搜索，发现取消选择单选按钮并不是那么简单。下面是一个在一定程度上解决了它的问题，但在 ng-repeat 块中完成时似乎不起作用： AngularJs. Is it possible to deselect HTML “radio” input by click?

这是我解决问题的方法。首先我这样设置 ng-repeat：

<div ng-repeat="role in roles" class="checkbox checkbox-inline checkbox-primary">
 <input id="{{ role.Value }}" ng-model="$parent.roleSelected" class="styled" type="radio" 
   name="{{ role.Group }}" value="{{ role.Value }}"  ng-click="clickRole($event)" />
 <label for="{{ role.Value }}">{{ role.Name }}</label>
</div>

在控制器中，我有两种方法。一种用于 ng-click，另一种用于监视 ng-model 的变化。我还有一个数组 ($scope.rolesSelected) 来跟踪所选角色。（我在页面上有多个 ng-repeat 块，有些是收音机，有些是复选框）。

当单击单选（或复选框）时，它会执行 clickRole() 函数，将 roleSelected 添加到 rolesSelected 数组。

$scope.clickRole = function (event) {
    if (event.target.type != 'radio') { // for checkboxes
        addOrRemoveFromArray($scope.rolesSelected, event.target.value);
    } else { // for radio - uncheck radio if selection was removed
        var addedRole = addOrRemoveFromArray($scope.rolesSelected, event.target.value);
        if (!addedRole) {
            event.target.checked = false;
        }
    }
}

addOrRemoveFromArray() 函数只是简单地将给定的值添加到数组中，否则将其删除。这是为了允许在单击单选按钮两次时删除选定的角色（一次添加，第二次删除）。

function addOrRemoveFromArray(array, value) {
    if (typeof value == 'undefined') { return; }
    var index = array.indexOf(value);
    if (index > -1) {
        array.splice(index, 1);
        return false;
    } else {
        array.push(value);
        return true;
    }
}

直到这里，它处理角色的添加和取消选择时的角色删除。（还处理复选框的添加/删除）。但对于无线电，在选择不同的角色时，它不会删除前一个。所以在 ng-model 上需要另一个 watch() 函数。

$scope.$watch('roleSelected', function (newValue, oldValue) {  
  removeFromArray($scope.rolesSelected, oldValue); 
});

最后，我能够处理单选按钮上的角色更改以及取消选择。

这花了我很多时间来弄清楚，所以我在这里发帖以防其他人遇到类似情况。谢谢！

【讨论】：