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
    }
  }

它类似于上面的解决方案,但保留了自己以前选择的副本.