Angular 1 - 切换单选按钮答案

【问题标题】：Angular 1 - toggle radio buttonAngular 1 - 切换单选按钮
【发布时间】：2017-07-17 15:54:23
【问题描述】：

我需要在用户单击时切换单选按钮。超过 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();
            });

        } 
}

不需要是指令...谢谢。

【问题讨论】：

标签： javascript angularjs radio-button

【解决方案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>

【讨论】：

不，我有更多选择，并且在申请中更多。
@CarnaruValentin：理想情况下，您应该使用复选框来满足此类要求，但如果有必要使用收音机，那么我已经更新了我的答案。

【解决方案2】：

我选择创建这个指令：

myApp.directive('toggleRadio', [function(){ 返回 { 限制：'A'，链接：函数（范围，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;
            }

        });
    }
}

}]);

在 HTML 中我有：

使用这种方法，它只会在用户单击输入本身时起作用，而不是标签。如果有人想要这样，必须重写此指令以使用 el.find()、el.next() 等查找输入状态。

谢谢大家，您的所有信息都帮助我了解所做的一切！

【讨论】：