如何在angularJs中同时绑定单选按钮和复选框？
[英]How to bind the radio button and checkbox simultaneously in angularJs?
问题描述
I have tried that, if i check the check box then radio button will also get selected.
我已经试过了，如果我选中复选框，那么单选按钮也会被选中。 Its going good when i check the check box.当我选中复选框时，它运行良好。
But, If i select the radio button binding process is not happening.但是，如果我选择单选按钮绑定过程不会发生。 ie, If i click the radio button ,the check box has to be checked.即，如果我单击单选按钮，则必须选中复选框。
I dont know how to do this?我不知道如何做到这一点？
Herewith placed the code.特此放置代码。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-model="checked">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked">Yeah :)
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= 0;
}]);
</script>
</body>
</html>
Can anyone please help on this?任何人都可以帮忙吗？
4 个解决方案
解决方案1
1 已采纳 2016-11-18 07:15:24
Try this试试这个
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <script> var app = angular.module("sampleApp", []); app.controller('sampleController', ['$scope', function ($scope) { }]); </script> <body ng-app="sampleApp"> <div ng-controller="sampleController" ng-init="checked='false'"> Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-click="checked = !checked"> <br/> <br/> You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above: <br/> <br/> <input id="checkSlave" type="radio" ng-checked="checked" ng-click="checked = !checked">Yeah :) </div>
解决方案2
1 2016-11-18 07:32:41
You could do something like this,it will definitely work你可以做这样的事情，它肯定会奏效
<!DOCTYPE html> <html lang="en-US"> <head> <title>Learn It HTML Template</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="sampleApp"> <div ng-controller="sampleController"> Are you going for party tonight: <input type="checkbox" ng-checked="slave" ng-model="checked"> <br/> <br/> You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above: <br/> <br/> <input id="checkSlave" type="radio" ng-checked="checked" ng-click="slave=true">Yeah :) </div> <script> var app = angular.module("sampleApp", []); app.controller('sampleController', ['$scope', function ($scope) { $scope.checked= false; $scope.slave=false; }]); </script> </body> </html>
I have introduced another variable which will change on click of the radio button,because the event which gets triggered from the radio button is not the check event rather it is the onclick event.我引入了另一个变量，它会在单击单选按钮时发生变化，因为从单选按钮触发的事件不是检查事件，而是 onclick 事件。
解决方案3
1 2016-11-18 07:48:53
Try this, Its worked fine..!试试这个，它工作得很好..！
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-checked="checked" ng-click="toggleSwitch()">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked" ng-click="toggleSwitch()">Yeah :)
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
$scope.checked= false;
$scope.toggleSwitch=function(){
$scope.checked= !$scope.checked;
}
}]);
</script>
</body>
</html>
</html>
解决方案4
0 2016-11-18 07:28:46
在这里，您没有指定双向绑定指令，即单选按钮的 ng-model。
<input id="checkSlave" type="radio" ng-checked="checked" ng-model="checked">Yeah :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.