AngularJs.是否可以通过单击取消选择HTML“无线电”输入

Question

我有无线电输入，如果当前无线电被选中，我想通过点击无线电取消选中状态。

这个代码:

<input type="radio" id="average_0" name="average" ng-model="checked" ng-change="false" value="500" class="ng-valid ng-dirty">
<input type="radio" id="average_1" name="average" ng-model="checked" ng-change="false" value="1000" class="ng-valid ng-dirty">
<input type="radio" id="average_2" name="average" ng-model="checked" ng-change="false" value="1500" class="ng-valid ng-dirty">

不工作。

小提琴:http://jsfiddle.net/Zoomer/8s4m2e5e/

Answer 1

单选按钮一次只能选中一个，一旦选中，用户就不能选中它们(除非您通过编程方式进行选中)。所以如果你想在当前选中时取消选中它，你可以这样做:

<input type="radio" ng-model="checked" value="500" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1000" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1500" ng-click="uncheck($event)" />

在你的控制器中:

$scope.uncheck = function (event) {
    if ($scope.checked == event.target.value)
        $scope.checked = false
}

演示:http://jsfiddle.net/8s4m2e5e/3/

注意:如果您真的想在众多选项中选择一个或不选择一个，您可以选择<select>

Answer 2

一个适用于Angular 1.3+的简单解决方案是:

模板

<input type="radio" ng-model="forms.selected" value="{{value}}" ng-click="radioCheckUncheck($event)">

控制器

  let lastChecked = null
  $scope.radioCheckUncheck = function (event) {
    if (event.target.value === lastChecked) {
      delete $scope.forms.selected
      lastChecked = null
    } else {
      lastChecked = event.target.value
    }
  }

它与上面的解决方案类似，但保留了自己的前一个选择的副本。

Answer 3

我用下面的代码解决了这个问题:

ng-dblclick = "{{model}} = '' "

Answer 4

一个更简单的解决方案是添加:

ng-dblclick = "checked = null"

Answer 5

您可以使用下面的方法。设置属性

public selectedMoiProfile : boolean  = false;
<input type="radio" 
       name="selectMoi"
       [checked]="selectedProfile"
       [value]="selectedProfile"
       (click)="onSelect(moiProfile)"
       class="selectMoi">

 onSelect(p: profile) {
     p.selectedProfile= p.selectedProfile? false : true;
 }