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

如何使用复选框，只有一个可选项？

<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

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

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

这花了我很长时间才弄明白所以我在这里发帖以防万一其他人遇到类似的情况。谢谢！

AngularJS - ng-repeat单选按钮，取消选择/取消选择

2 个答案: