Невозможно создать функцию многократного использования для снятия отметки с радио кнопки в AngularJS

Question

Мне было дано требование, чтобы все радиокнопки на нашем сайте были не поддающимися выбору. Я могу сделать это с помощью функции, закодированной для этого набора переключателей. Но я бы предпочел иметь общий, поэтому мне не нужно добавлять одни и те же строки кода снова и снова.

Вот моя попытка создать общий. Кажется, он почти работает в том, что он обнаруживает, когда радиатор должен быть очищен (я зашел в консоль), но на самом деле ничего не видно.

$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 не будет иметь желаемого эффекта. Вместо этого вы можете передать «ключ» в свой словарь 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">