使用复选框清除/更新html/angularjs中的单选按钮
使用复选框清除/更新html/angularjs中的单选按钮
提问于 2018-01-12 19:55:37
我的表单有一个复选框，后面跟着几个单选buttons.Basically，设计要求用户能够使用复选框清除一组单选按钮(或设置默认值)。如果用户应该选择一个单选按钮，那么复选框也将被设置。
总的来说，下面的代码满足了大多数需求，但是，当它不能工作时，有一个条件：
- 用户选择复选框。(复选框中出现)
- 用户选择单选按钮。(选择单选按钮)
- 用户再次选择复选框。(复选框和单选按钮取消选中)
- 用户选择单选按钮。(选中复选框并选中单选按钮)
- 用户取消选中复选框。(“选中”消失，但值未更新，因此单选按钮不会取消选择)
这是怎么回事？如何编写它以获得用户想要的行为？
谢谢，马特
以下是代码：
var myAngular=angular.module('myApp',[]);
myAngular.controller('myController',function($scope){
$scope.title="Angular Radio Buttons";
$scope.selectedValue='i10';
$scope.numStatus = 0;
$scope.numStatusChanged = function () {
console.log('numStatusChanged:')
if ($scope.numStatus === 0) {
$scope.numStatus = 3;
console.log('From 0 to 3.');
} else {
$scope.numStatus = 0;
console.log('From ' + $scope.numStatus + ' to 0.' )
}
};
$scope.$watch('numStatus', function(newValue,oldValue,scope){
console.log('newVal:' + newValue + ' oldValue:' + oldValue);
});
$scope.$watch('aBool', function(newValue,oldValue,scope){
console.log('aBoolNew:' + newValue + ' aBoolOld:' + oldValue);
});
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<div ng-controller='myController'>
<p>Selected Value: {{numStatus}}</p>
<div class="checkBoxGroup">
<input type="checkbox" id="isCheckbox" ng-model="aBool" value="" ng-checked="numStatus !== 0" ng-change="numStatusChanged()">
<label for="isCheckbox">A Value Is Selected</label>
<div class="radio-button-vertical">
<div class="radio">
<label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="1" name="numStatus" /> One</label>
</div>
<div class="radio">
<label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="2" name="numStatus" /> Two</label>
</div>
<div class="radio">
<label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="3" name="numStatus" /> Three</label>
</div>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-01-12 20:14:47
您将使用ngChecked和ngModel，我希望您的问题是，这两个属性是相互冲突的，因为它们表示类似的绑定(other SO post explaining this)。
只需将复选框重写为：
<input type="checkbox" id="isCheckbox" ng-model="aBool" value="" ng-change="numStatusChanged()">
然后在numStatus !== 0方法中签入numStatusChanged()并使用结果设置aBool。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48233180
复制相关文章
相似问题
腾讯云开发者
