javascript - Angular 1 - 切换单选按钮

Question

我需要在用户单击时切换单选按钮。多于 2 个按钮。

所以，当我点击一个按钮时，如果这个被选中将不再。如果不是必须选择。

我试过这个，但行不通:

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

        } 
}

不需要成为指令...谢谢。

Answer 1

因为它是一个单选按钮，而且正如您所说，它不需要是一个指令，这似乎也没有必要，那么您可以执行如下操作:

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>

更新:

理想情况下，您应该针对此类要求使用复选框，但如果有必要使用radio，请按以下方式操作:

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>