Wie zu deaktivieren, Inhalte auf Basis der checkbox in AngularJS/Bootstrap3

Erstelle ich ein Formular, wo der Benutzer kann konfigurieren Sie einen wiederkehrenden Termin, so gibt es eine große Anzahl von Kontrollen. An der Spitze befindet sich ein Kontrollkästchen zum aktivieren/deaktivieren des Zeitplans.

Wie kann ich das deaktivieren, aber nicht ausblenden, wird der gesamte Abschnitt basiert auf die checkbox? Wenn es aktiviert ist, der Benutzer sollte in der Lage sein, änderungen an den Zeitplan. Wenn es nicht aktiviert ist, sind keine änderungen erlaubt werden sollte.

Ich bin ziemlich sicher ich kann die ng-deaktiviert-Richtlinie auf jedes Steuerelement, aber ich würde gerne einige attribute/Klasse auf dem gesamten Containers, anstatt auf jedes einzelne Steuerelement.

Ich bin mit Bootstrap 3, so dass, wenn eine Klasse vorhanden ist, würde diese Funktionalität bieten, das wäre eine akzeptable Lösung.

Hier ist der entsprechende Abschnitt der HTML:

<input type="checkbox" ng-model="status" title="Enable/Disable Schedule" /> <b>Schedule the task to run:</b>
<div class="row"> <!-- need a way to disable this row based on the checkbox -->
    <span>Every <input type="number" ng-model="interval" /> 
         <select ng-model="frequency" 
                 ng-options="freq as freq.name for freq in frequencies"></select>
    </span> 
    <div>
        On these days:
    </div>
    <div class="btn-group" data-toggle="buttons-checkbox">
        <button type="button" 
                class="btn" 
                ng-model="day.value" 
                ng-repeat="day in days">{{day.name}}</button>
    </div>
</div>

Habe ich versucht:

<div class="row" ng-disabled="!status">

Es hat nicht funktioniert, und auf der Grundlage der Dokumente, es sieht nicht wie es ist, auch soll, wie seine beabsichtigte Verwendung ist für die Deaktivierung der Formular-Steuerelemente. Ich habe auch versucht ohne die !, nur um zu überprüfen, dass es nicht funktionieren würde.

Willkommen ALSO! Bitte Bearbeiten Sie Ihre Frage zum zählen der Codezeilen, die relevant für Ihre Frage, wie der Teil der form mit der checkbox, wird der Abschnitt, den Sie möchten, deaktiviert, und alle anderen zugehörigen code, den Sie versucht haben, zu verwenden, um Ihr Ziel zu erreichen.
ng-disabled ist der Weg zu gehen, wenn Sie nicht wollen, um hinzuzufügen, dass das Attribut für jedes form-element, das Sie erstellen Sie eine Richtlinie deaktiviert wird jedes form-element, das darin enthalten ist.

InformationsquelleAutor Nick | 2014-01-23

  1. 25

    OK, ich fand eine Technik, die funktioniert für meine Zwecke...

    <div class="row" ng-class="{disabled: !status}"> <!-- added ng-class here -->

    und 

    .disabled {
    z-index: 1000;
    background-color: lightgrey;
    opacity: 0.6;
    pointer-events: none;
}

    Dies verhindert, dass die Klicks auf der Seite und gibt eine schöne visuelle Anzeige der Abschnitt "deaktiviert".
    Es hindert mich nicht daran tabbing durch die Kontrollen, aber es funktioniert OK für meine Zwecke.

    InformationsquelleAutor Nick

Schreibe einen Kommentar