無法爲AngularJS中的單選按鈕創建可重複使用的函數

我被要求我們網站中的所有單選按鈕都需要取消選擇。我可以通過硬編碼到該組單選按鈕的功能來完成此操作。但我寧願有一個通用的，所以我不必一遍又一遍地添加相同的代碼行。無法爲AngularJS中的單選按鈕創建可重複使用的函數

這是我的嘗試創建一個通用的。它似乎幾乎工作，它會檢測何時應該清除單選按鈕（我登錄控制檯），但它實際上並沒有清除任何東西。

$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

來源

2015-09-18 ChameleonQuest

什麼$超時（函數（）{$（」。anycommonclass '）ATTR（'檢查'，假）.trigger（'change'）;}）; –

嗯，這裏是[如何取消選擇單選按鈕]（http://stackoverflow.com/q/10876953/4320665）。然後，你只需要找出一個讓所有單選按鈕不可選的好方法。我個人會在特定的無線電輸入上應用自定義屬性指令。 – ryanyuyu

裏面你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。

來源

2015-09-18 20:24:29

只是要發佈相同的東西。你的答案更簡潔，所以我很高興我沒有。 –

感謝您的解釋。現在似乎很明顯。 – ChameleonQuest

我會在你的情況做的是創造這樣的指令（不會得到任何東西比這更可重複使用）

喜歡的東西

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

來源

2015-09-18 20:33:48 masimplo

這當然是更角（更乾淨，更模塊化）的方法。 –

啊，非常漂亮，只有一行代碼。謝謝！ – ChameleonQuest

必須使用'priority：2'才能正常工作。 –

好像你想要一個指令，所以你可以輕鬆地重新使用這個功能。我在這裏更新了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">

來源

2015-09-18 20:34:37 Fishz

無法爲AngularJS中的單選按鈕創建可重複使用的函數

回答

相關問題