Question

我被要求我们网站上的所有单选按钮都需要无法选择。我可以使用硬编码到该组单选按钮的功能来完成此操作。但我希望有一个通用的，所以我不必一遍又一遍地添加相同的代码行。

这是我尝试创建一个通用的。它几乎可以工作，因为它检测到应该清除radiobutton的时间（我登录控制台），但实际上并没有清除任何内容。

$scope.RadioCheckUncheck = function (RadioModel, event) {
  if (RadioModel === event.target.value) {
    console.log('looks like you clicked this already')
    RadioModel = null;
  }
}

和HTML

ng-click="RadioCheckUncheck(myModelName, $event)"

http://plnkr.co/edit/HcMfXWTtIRT9WThxE3c5?p=preview

这是一个可行的类似版本，但它是硬编码的。

http://plnkr.co/edit/00XCKeiIJJeFj96yARjC?p=preview

Answer 1

在RadioCheckUncheck方法中，RadioModel参数只是一个字符串，而不是对$scope字段的引用，因此将其设置为null将无法获得所需影响。您可以改为传递＆＃34;键＆＃34;到您的FavoriteThingies词典并使用该词典将其设置为null。

HTML：

<input type="radio" name="my_favorite" ng-value="'Tom'" ng-model="FavoriteThingies.FavoriteCharacter" ng-click="RadioCheckUncheck('FavoriteCharacter', $event)">Tom
<input type="radio" name="my_favorite" ng-value="'Jerry'" ng-model="FavoriteThingies.FavoriteCharacter" ng-click="RadioCheckUncheck('FavoriteCharacter', $event)">Jerry

<input type="radio" name="my_favorite_fruit" ng-value="'Orange'" ng-model="FavoriteThingies.FavoriteFruit" ng-click="RadioCheckUncheck('FavoriteFruit', $event)">Orange
<input type="radio" name="my_favorite_fruit" ng-value="'Apple'" ng-model="FavoriteThingies.FavoriteFruit" ng-click="RadioCheckUncheck('FavoriteFruit', $event)">Apple

JavaScript的：

var myApp = angular.module('myApp', []);

myApp.controller('RadioController', function ($scope) {
    $scope.FavoriteThingies = {};
    $scope.RadioCheckUncheck = function (key, event) {
      if ($scope.FavoriteThingies[key] === event.target.value) {
        console.log('looks like you clicked this already')
        $scope.FavoriteThingies[key] = null;
      }
    }
});

更新版本在此处：http://plnkr.co/edit/U0aQEfe6WBTfsu8MPsBQ?p=info。

Answer 2

在你的情况下我会做的是为此创建一个指令（不会得到比这更可重用的东西）

像

这样的东西

myApp.directive('uncheckable', function(){
  return {
    scope: {
      val: '=ngModel'
    },
    link: function(scope, element, attrs){
      element.bind('click', function(){
        if(scope.val) scope.val = null;
      })
    }
  }
})

然后就像使用它一样：

<input uncheckable type="radio" name="Tom" ng-value="'Tom'" ng-model="myModel" />

这是一个plnkr http://plnkr.co/edit/Ts2a6z3zbEyjlbXzaAYC?p=preview

您甚至可以通过执行以下操作更精细地使用ngModelController进行游戏，而不是绑定到ngModel（具有完全相同的效果，但功能更强大）：

myApp.directive('uncheckable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      if(!ngModelController) return; //do nothing if not binded
      element.bind('click', function() {
        if (ngModelController.$modelValue) {
          ngModelController.$setViewValue(null);
          ngModelController.$render();
        }
      })
    }
  }
})

在此处查看http://plnkr.co/edit/IrvfZq?p=preview

Answer 3

好像你想要一个指令，所以你可以轻松地重用这个功能。我在这里更新了plunkr：

http://plnkr.co/edit/yQv4vZwX1Tf2uhPy7Kff?p=preview

...但为方便起见，这里有肉：

myApp.directive('unselectable', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      clickCount = 0;
      element.on('click', function() {
        clickCount++;
        if (element[0].checked && clickCount > 1) {
          element[0].checked = false;
          clickCount = 0;
        }
      });
    }
  }
}]);

然后只需将指令添加到无线电元素：

<input unselectable type="radio" name="my_favorite" ng-value="'Tom'" ng-model="FavoriteThingies.FavoriteCharacter">

无法创建可重复使用的函数来取消选中AngularJS中的单选按钮

3 个答案: