AngularJs.是否可以通过单击取消选择 HTML“收音机"输入?

AngularJs. Is it possible to deselect HTML “radio” input by click?(AngularJs.是否可以通过单击取消选择 HTML“收音机输入?)
本文介绍了AngularJs.是否可以通过单击取消选择 HTML“收音机"输入?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

I have radio inputs and want to ucheck state by click on radio if current radio is checked.

This code:

<input type="radio" id="average_0" name="average" ng-model="checked" ng-change="false" value="500" class="ng-valid ng-dirty">
<input type="radio" id="average_1" name="average" ng-model="checked" ng-change="false" value="1000" class="ng-valid ng-dirty">
<input type="radio" id="average_2" name="average" ng-model="checked" ng-change="false" value="1500" class="ng-valid ng-dirty">

Not working.

Fiddle: http://jsfiddle.net/Zoomer/8s4m2e5e/

解决方案

Radio buttons can be selected only one at a time and cannot be unchecked by the user once they are checked (unless you do programmatically). So if you want to uncheck it when it is currently selected, you can do this:

<input type="radio" ng-model="checked" value="500" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1000" ng-click="uncheck($event)" />
<input type="radio" ng-model="checked" value="1500" ng-click="uncheck($event)" />

In your controller:

$scope.uncheck = function (event) {
    if ($scope.checked == event.target.value)
        $scope.checked = false
}

DEMO: http://jsfiddle.net/8s4m2e5e/3/

NOTE: If you really want to choose one or none from many options, you may opt for a <select>

这篇关于AngularJs.是否可以通过单击取消选择 HTML“收音机"输入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

How to sort a array of object based on two properties and check the rage is sequential?(如何根据两个属性对对象数组进行排序,并检查范围是否连续?)
Untyped function calls may not accept type arguments - Angular 5 http calls(非类型化函数调用可能不接受类型参数-角度5 http调用)
ReferenceError: Excel is not defined(ReferenceError:未定义Excel)
How to save two canvas(outer and inner) as png using fabric js in angular(如何保存两个画布(外部和内部)为PNG使用织物js的角度)
Access to #39;Set-Cookies#39; header in $http(访问$http中的Set-Cookies标头)
Adding lt;stronggt;/bold text in translated string using angular-translate(使用角度翻译在翻译后的字符串中添加lt;stronggt;/粗体文本)