ng-disabled funktioniert nicht für Radio-Buttons und Checkboxen

Question

Ich arbeite an einer AngularJS-Anwendung. Ich versuche eine Seite zu erstellen, auf der der Benutzer einen von drei Optionsfeldern auswählen kann. Zwei der drei haben auch Kontrollkästchen darunter, damit der Benutzer zusätzliche Optionen auswählen kann, wenn sie das entsprechende Optionsfeld ausgewählt haben. Um zu versuchen, unpassende Checkbox-Auswahl zu verhindern, versuche ich, das ng-disabled-Attribut auf den Checkboxen zu setzen. Bis jetzt funktioniert es nicht und ich habe mehrere verschiedene Iterationen ausprobiert.

Das ist mein 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> 

ich den Bediener auf den ng-disabled Ausdrücke & & Wechsel haben versucht, wie ich einige Artikel gesehen haben, wo es, dass die Betreiber bedeuten nicht vorgeschlagen hat, was man denkt, sie meinen es. Aber das funktioniert nicht, und es funktioniert auch nicht, wenn ich nur eine Bedingung in den Ausdruck lege. Es gibt (noch) nichts im Controller, das versucht, irgendeines der ng-Modelle im HTML zu verwenden oder zu manipulieren. Ich bin zu dem Schluss gekommen, dass es etwas gibt, was mir in Bezug auf die Radioknöpfe fehlt, aber ich kann nicht für das Leben von mir herausfinden, was.

Kann jemand sehen, was mein Fehler ist?

Answer 1

sollten Sie die Eigenschaft value verwenden, um einen speziellen Wert für die Optionsschaltfläche zu binden. Wenn der Status der Optionsschaltfläche geändert wird, wird der Wert auf ng-model festgelegt.

siehe das Code-Snippet unten:

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>