Angular 1 - toggle Optionsfeld

Question

Ich muss ein Optionsfeld umschalten, wenn der Benutzer klickt. Ist mehr als 2 Tasten.

Also, wenn ich einen Knopf klicken, wenn dies ausgewählt ist, wird nicht mehr sein. Wenn nicht muss ausgewählt werden.

Ich versuche, dies, ist aber funktioniert nicht:

app.directive('toggleRadio', function($timeout) { 
    return { 
     restict: 'A', 
     link: function(scope, el, attrs) { 
      var radioState; 
      el.on('click', function(){ 
       if (radioState === this) { 
        this.checked = false; 
        radioState = null; 
       } else { 
        radioState = this; 
       } 
       scope.$apply(); 
      }); 

     } 
} 

Es ist nicht eine Richtlinie ... Dank sein müssen.

Answer 1

Da es sich um eine einzelne Radiobutton ist und wie Sie sagte, es ist nicht eine Richtlinie, werden benötigt, die scheint nicht notwendig zu sein, wie gut, dann können Sie wie unten etwas tun:

var app = angular.module('app', []); 
 
app.controller('MainCtrl', ['$scope', function($scope) { 
 
    $scope.checked = false; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
    <input type="radio" ng-model="checked" 
 
    ng-value="true" ng-click="checked=!checked" /> 
 
    {{checked}} 
 
    </div> 
 
</div>

Aktualisiert:

Idealerweise sollten Sie Kontrollkästchen für diese Anforderung verwenden, aber ich f es so notwendig radio zu verwenden, tun Sie es dann wie folgt:

var app = angular.module('app', []); 
 
app.controller('MainCtrl', function($scope) { 
 
    $scope.valChanged = false; 
 
    $scope.checked = "b"; 
 
    $scope.toggle = function() { 
 
    if (!$scope.valChanged) { 
 
     $scope.checked = ""; 
 
    } 
 
    $scope.valChanged = false; 
 
    } 
 
});

<script src="https://code.angularjs.org/1.5.2/angular.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainCtrl"> 
 
    <br> 
 
    <input type="radio" ng-model="checked" value="a" 
 
    ng-change="valChanged = true" ng-click="toggle()" />Option A 
 
    <br> 
 
    <input type="radio" ng-model="checked" value="b" 
 
    ng-change="valChanged = true" ng-click="toggle()" />Option B 
 
    <br> 
 
    <input type="radio" ng-model="checked" value="c" 
 
    ng-change="valChanged = true" ng-click="toggle()" />Option C 
 
    <hr> {{checked}} 
 
    </div> 
 
</div>

Answer 2

ich wählen diese Richtlinie zu erstellen:

myApp.directive ('toggleRadio', [function() { return { beschränken: 'A', Link: Funktion (scope, el, attrs) {

 el.on("mouseenter", function(e){ 

      scope.radioStr = e.target.checked; 
      console.log('scope.radioStr hover: ', scope.radioStr); 

     }); 

     el.on("click", function(e){ 

      if(scope.radioStr) { 
       e.target.checked = false; 
       scope.radioStr = false; 
      } 
      else { 
       e.target.checked = true; 
       scope.radioStr = true; 
      } 

     }); 
    } 
} 

}]);

Und in HTML ich habe:

Mit diesem Ansatz wird es funktioniert nur, wenn der Benutzer auf Eingabe klickt selbst, nicht für das Label. Wenn jemand das will, muss diese Direktive umschreiben, um den Eingabestatus mit, el.find(), el.next() usw. zu finden.

Vielen Dank all Ihre Informationen helfen mir zu verstehen, was getan wurde!