AngularJS

Question

我正在尝试为单选按钮创建一个 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>

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

Answer 1

我搜索了一下，发现单选按钮的取消选择并不是那么简单。下面是一个稍微解决了它的问题，但在 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;
    }
}

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

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

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

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

Answer 2

如果只使用一个可选项目，使用复选框怎么样？

<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

AngularJS - 带有 deselect/unselect 的 ng-repeat 单选按钮

AngularJS - ng-repeat radio buttons with deselect/unselect

javascript

radio-button

ng-repeat

deselect