角度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> 

Answer 2

我選擇創建此指令：

myApp.directive（'toggleRadio'，[function（）{return {strict：'A'，link：function（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;
            }

        });
    }
}

}]）;

在HTML中，我有：

通過這種方法，它將僅在用戶單擊輸入本身而不是標簽時才起作用。 如果有人想要，必須重寫此指令以使用el.find（），el.next（）等查找輸入狀態。

謝謝大家，您的所有信息都可以幫助我了解所做的事情！