ng-disabled對單選按鈕和複選框不起作用

Question

我正在使用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-禁用表情運營商& &，因爲我已經看到了一些文章在那裏的建議，運營商並不意味着什麼人們認爲他們的意思。但是這並不起作用，如果我在表達式中只放一個條件，它也不起作用。控制器中沒有任何東西試圖使用或操縱HTML中的任何ng模型。我得出的結論是，我錯過了關於單選按鈕的東西，但我不能爲我的生活弄清楚什麼。

任何人都可以看到我的錯誤是什麼？

Answer 1

您應該使用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>