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 = "checked = null"

Answer 4

Я решил проблему с помощью следующего кода:

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

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