web-dev-qa-db-ja.com

AngularJs。 HTMLの「無線」入力をクリックで選択解除することはできますか？

ラジオ入力があり、現在のラジオがチェックされている場合は、ラジオをクリックして状態をチェックしたい。

このコード：

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

javascriptangularjsradio-button
14
user3843670

ラジオボタンは一度に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/

注：多くのオプションから1つを選択するか、まったく選択しない場合は、<select>を選択できます。

20
Raghavendra

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

これは上記のソリューションに似ていますが、以前の選択の独自のコピーを維持します。

10
Jason Farnsworth

以下を使用して行うことができます。属性を設定します。

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

より簡単な解決策は、以下を追加することです。

ng-dblclick = "checked = null"
0
sdemurjian

私は次のコードで問題を解決しました：

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