使用复选框清除/更新 html/angularjs 中的单选按钮答案

【问题标题】：Use checkbox to clear/update radio buttons in html/angularjs使用复选框清除/更新 html/angularjs 中的单选按钮
【发布时间】：2018-01-13 04:14:47
【问题描述】：

我的表单有一个复选框，后面跟着几个单选按钮。基本上，该设计要求用户能够使用复选框来清除一组单选按钮（或设置默认值）。如果用户应该选择一个单选按钮，那么复选框也会被设置。

总的来说，下面的代码满足了大部分要求，但是有一个条件它不起作用：

用户选择复选框。（勾选出现在复选框中）
用户选择单选按钮。（选择单选按钮）
用户再次选择复选框。（检查从复选框中消失，单选按钮取消选择）
用户选择单选按钮。（勾选出现在复选框和单选按钮中）
用户取消选中复选框。（检查消失，但值未更新，因此单选按钮不会取消选择）

发生了什么？如何编写它来获得我的用户想要的行为？

谢谢，马特

代码如下：

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" />&nbsp;One</label>
                                </div>
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="2" name="numStatus" />&nbsp;Two</label>
                                </div>
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" ng-model="numStatus" data-ng-value="3" name="numStatus" />&nbsp;Three</label>
                                </div>
                            </div>
                        </div>

  </div>
</div>

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您同时使用 ngChecked 和 ngModel，我希望您的问题是这两个属性相互冲突，因为它们代表相似的绑定 (other SO post explaining this)。

只需将复选框重写为：

<input type="checkbox" id="isCheckbox" ng-model="aBool" value="" ng-change="numStatusChanged()">

然后在numStatusChanged()方法中执行numStatus !== 0检查并使用结果设置aBool。

【讨论】：