web-dev-qa-db-fra.com

AngularJs. Est-il possible de désélectionner l'entrée HTML "radio" par clic?

J'ai des entrées radio et je veux vérifier l'état en cliquant sur radio si la radio actuelle est cochée.

Ce code:

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

Ne fonctionne pas.

Fiddle: http://jsfiddle.net/Zoomer/8s4m2e5e/

javascriptangularjsradio-button
13
user3843670

Les boutons radio ne peuvent être sélectionnés que l'un après l'autre et ne peuvent pas être désélectionnés par l'utilisateur une fois qu'ils ont été cochés (sauf si vous le faites par programme). Donc, si vous voulez le décocher quand il est sélectionné, vous pouvez faire ceci:

<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)" />

Dans votre contrôleur:

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

DEMO: http://jsfiddle.net/8s4m2e5e/3/

NOTE: Si vous voulez vraiment choisir une option parmi d’autres, vous pouvez opter pour un <select>.

20
Raghavendra

Une solution simple qui fonctionne sur Angular 1.3+ est la suivante:

Modèle

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

Manette

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

Elle ressemble à la solution ci-dessus, mais conserve sa propre copie de la sélection précédente.

9
Jason Farnsworth

Une solution plus simple consiste à ajouter:

ng-dblclick = "checked = null"
0
sdemurjian

J'ai résolu le problème avec le code suivant:

ng-dblclick = "{{model}} = '' "
0
Iain Rough