У меня есть следующее событие jQuery click, которое я пытаюсь "угловато" с помощью ng-click, но не могу понять, как это сделать.
$('body').on('click change', 'input[type="radio"]:not([disabled])', function(event) {
$(this).prop('checked') //if checked
? $(this).prop('checked',false).data('waschecked', false) //uncheck
: $(this).prop('checked',true).data('waschecked', true); //else check
});
Цель состоит в том, чтобы проверить, действительно ли элемент уже выбран, и если это произойдет, сбросьте переключатель.
Может ли кто-нибудь указать мне в правильном направлении?
Мое предложение здесь - использовать одно значение для состояния группы и другое значение для кнопок и использовать ng-click
для сравнения кнопок с состоянием группы.
например:
<input type="radio" ng-checked="true" ng-model="buttons" value="one" ng-click="radioChanged()">
<input type="radio" ng-checked="false" ng-model="buttons" value="two" ng-click="radioChanged()">
<input type="radio" ng-checked="false" ng-model="buttons" value="three" ng-click="radioChanged()">
$scope.radioChanged = function (){
if ($scope.buttons === $scope.group){
$scope.buttons = undefined;
}
$scope.group = $scope.buttons;
console.log($scope.group, $scope.buttons);
};
Это нестандартное поведение, но вот пример, который делает то, что вы ищете: https://jsbin.com/sicuhugevu/1/edit?html,js,output
Для тех, кто не хочет посетить JSBin:
JS:
angular
.module('test', [])
.controller('testCtrl', function($scope) {
$scope.radios = {
selected: null,
last: null
};
$scope.radioClick = function(event) {
if ($scope.radios.last === $scope.radios.selected) {
$scope.radios.selected = null;
$scope.radios.last = null;
return;
}
$scope.radios.last = event.target.value;
};
});
И HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app="test">
<div data-ng-controller="testCtrl">
<label><input type="radio" name="test" value="1"
data-ng-click="radioClick($event)"
data-ng-model="radios.selected">Option 1</label>
<label><input type="radio" name="test" value="2"
data-ng-click="radioClick($event)"
data-ng-model="radios.selected">Option 2</label>
<label><input type="radio" name="test" value="3"
data-ng-click="radioClick($event)"
data-ng-model="radios.selected">Option 3</label>
</div>
</body>
</html>
И локальная версия:
angular
.module('test', [])
.controller('testCtrl', function($scope) {
$scope.radios = {
selected: null,
last: null
};
$scope.radioClick = function(event) {
if ($scope.radios.last === $scope.radios.selected) {
$scope.radios.selected = null;
$scope.radios.last = null;
return;
}
$scope.radios.last = event.target.value;
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app="test">
<div data-ng-controller="testCtrl">
<label><input type="radio" name="test" value="1"
data-ng-click="radioClick($event)"
data-ng-model="radios.selected">Option 1</label>
<label><input type="radio" name="test" value="2"
data-ng-click="radioClick($event)"
data-ng-model="radios.selected">Option 2</label>
<label><input type="radio" name="test" value="3"
data-ng-click="radioClick($event)"
data-ng-model="radios.selected">Option 3</label>
</div>
</body>
</html>