-1

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

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

4

2 回答 2

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

于 2016-02-13T21:22:07.197 回答
-1

我做了一些搜索，发现取消选择单选按钮并不是那么简单。下面是一个在一定程度上解决了它的问题，但在 ng-repeat 块中完成时似乎不起作用： AngularJs。是否可以通过单击取消选择 HTML“收音机”输入？

这是我解决问题的方法。首先，我这样设置 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); 
});

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

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

于 2016-02-13T21:09:52.887 回答