3

我正在开发一个 AngularJS 应用程序。我正在尝试创建一个允许用户选择三个单选按钮之一的页面。这三个中的两个在其下方也有复选框，如果用户选择了适当的单选按钮，则允许用户选择其他选项。为了防止不正确的复选框选择，我试图在复选框上设置 ng-disabled 属性。到目前为止，它不起作用，我已经尝试了几种不同的迭代。

这是我的 HTML：

    <div class="panel-body">
        <input type="radio" id="notFraudulent" name="actionSelector" ng-model="cleared" /><label for="notFraudulentRadio"> Not Fraudulent</label><br />
        <input type="checkbox" id="highVolumeCustomer" ng-model="highVolumeCustomer" ng-disabled="(fraudulent||cleared)" /><label for="highVolumeCustomer"> High Volume Customer</label><br />
        <br/>
        <input type="radio" id="appearsFraudulent" name="actionSelector" ng-model="fraudulent" /><label for="isFraudulentRadio"> Appears Fraudulent</label><br />
        <input type="checkbox" id="reportAccount" ng-model="reportAccount" ng-disabled="(cleared||reviewed)" /><label for="reportAccount"> Report Account</label><br />
        <br/>
        <input type="radio" id="markReviewed" name="actionSelector" ng-model="reviewed" /><label for="markReviewed"> Mark As Reviewed For Later</label>
    </div>

我已经尝试将 ng-disabled 表达式上的运算符更改为 &&，因为我看过一些文章，其中建议运算符并不意味着人们认为它们的意思。但这不起作用，如果我在表达式中只放一个条件，它也不起作用。控制器中没有任何东西（目前）试图使用或操作 HTML 中的任何 ng-model。我得出的结论是，我在单选按钮方面缺少一些东西，但我一生都无法弄清楚是什么。

谁能看到我的错误是什么？

4

1 回答 1

3

您应该使用value属性为单选按钮绑定特殊值，当单选按钮的状态发生变化时，该值将保持在ng-model.

参考下面的代码片段：

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.selectedValue = 'cleared';
    $scope.cleared = false;
    $scope.fraudulent = false;
    $scope.reviewed = false;
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel-body" ng-app='app' ng-controller="myCtrl">
  <input type="radio" id="notFraudulentRadio" name="actionSelector" value="cleared" ng-model="selectedValue" /><label for="notFraudulentRadio"> Not Fraudulent</label><br />
  <input type="checkbox" id="highVolumeCustomer" ng-model="highVolumeCustomer" ng-disabled="selectedValue === 'fraudulent' || selectedValue === 'cleared'" /><label for="highVolumeCustomer"> High Volume Customer</label><br />
  <br/>
  <input type="radio" id="isFraudulentRadio" name="actionSelector" value="fraudulent" ng-model="selectedValue"/><label for="isFraudulentRadio"> Appears Fraudulent</label><br />
  <input type="checkbox" id="reportAccount" ng-model="reportAccount" ng-disabled="selectedValue === 'cleared' || selectedValue === 'reviewed'" /><label for="reportAccount"> Report Account</label><br />
  <br/>
  <input type="radio" id="markReviewed" name="actionSelector" value="reviewed" ng-model="selectedValue"/><label for="markReviewed"> Mark As Reviewed For Later</label>
  <br>
  cleared:{{cleared}}<br>
  fraudulent:{{fraudulent}}<br>
  reviewed:{{reviewed}}<br>
  selectedValue: {{selectedValue}}
</div>

于 2017-05-04T15:45:51.843 回答