如果连续点击两次,Angularjs会重置无线电输入
Angularjs reset radio input if clicked twice in a row
我有以下的jQuery点击事件,我试图用一个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
});
目的是检查项目是否确实已被选中,如果是,则重置单选按钮。
谁能给我指个正确的方向?这是一种非标准行为,但这里有一个示例可以满足您的要求: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>
我的建议是为组状态使用一个值,为按钮使用不同的值,并使用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);
};
http://plnkr.co/edit/lh9XjWr1cCxdf1asuKxo?p =预览
相关文章:
- 如何从 AngularJS 输入中禁用我的复选框
- AngularJS输入接受整数和特殊字符
- AngularJS输入ng模型未更新
- 通过JS更新时,Angularjs输入不会更改,而不是手动更新
- AngularJS:输入表单在分部中不起作用
- 如何根据AngularJS输入类$invalid将Twitter Bootstrap类设置为错误
- AngularJs输入文本框只允许大于零值
- angularjs输入类型日期的日期格式验证
- AngularJs输入无线电值
- 以编程方式更改AngularJS输入[date]
- AngularJS输入检查/取消检查有2个功能
- AngularJS输入url无效/有效/错误
- angularjs输入的ng模式〔email〕没有'没有按预期工作
- angularJs输入指令中的JavaScript双括号'的源代码
- AngularJS输入指令在模糊上应用和删除格式&集中
- AngularJS输入表单验证没有'当它's模型的更改
- 如何使用angularjs输入文本并渲染html
- 输入文本字段(移动应用程序),不允许用户使用angularjs输入数值
- AngularJS输入自动对焦
- AngularJS输入选择ng模型中的整数值停止工作