Comment faire pour désactiver le contenu basé sur la case à cocher dans AngularJS/Bootstrap3

Je suis entrain de créer un formulaire où l'utilisateur peut configurer un événement récurrent, il y a donc un grand nombre de contrôles. Au sommet se trouve une case à cocher pour activer/désactiver la planification.

Comment puis-je désactiver, mais pas le cacher, l'ensemble de la section, en fonction de la case? Si elle est cochée, l'utilisateur doit être en mesure d'apporter des modifications à l'horaire. Si elle n'est pas cochée, aucun changement ne doit être autorisé.

Je suis assez certain que je peux utiliser le ng-désactivé directive sur chaque contrôle, mais je voudrais définir un attribut de classe sur l'ensemble du conteneur, plutôt que sur chaque contrôle.

Je suis en utilisant Bootstrap 3, donc si il ya une classe qui permettrait de fournir cette fonctionnalité, qui serait une solution acceptable.

Voici la partie du code 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>

J'ai essayé:

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

Il n'a pas de travail, et sur la base des docs, il ne regarde pas comme il se doit même, en tant que son utilisation prévue est pour la désactivation des contrôles de formulaire. J'ai aussi essayé sans le !, juste pour valider que ça ne fonctionne pas non plus.

Bienvenue DONC! Merci d'éditer votre question à inclure les bits de code pertinentes à votre question, comme la partie de votre forme avec la case à cocher, la section que vous souhaitez désactivé et tout autre code que vous avez essayé d'utiliser pour atteindre votre objectif.
ng-disabled est le chemin à parcourir, si vous ne voulez pas ajouter cet attribut pour chaque élément de formulaire, vous pouvez créer une directive qui désactive chaque élément de formulaire.

OriginalL'auteur Nick | 2014-01-23

  1. 25

    OK, j'ai trouvé une technique qui fonctionne pour mes fins...

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

    et 

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

    Cela évite les clics sur la page et donne une bonne indication visuelle de la section "personnes handicapées".
    Cela ne m'empêche pas de tabulation à travers les contrôles, mais il fonctionne bien pour mes besoins.

    OriginalL'auteur Nick