Ein ganzes div in angularjs deaktivieren

Question

Gibt es eine Möglichkeit, ein ganzes div-Tag in angularjs zu deaktivieren. Ich habe ein Div-Tag, das mehrere Formularfelder enthält, die ich mit nur einer Bedingung deaktivieren möchte. Ist das möglich? Unten ist mein Code.Ich habe es versucht, aber es hat nicht funktioniert. Irgendwelche Vorschläge wären hilfreich. Danke, siehe Code unten. Ich habe das Hauptdiv-Tag, das das Formular enthält. Ich möchte das Formular basierend auf einer Bedingung deaktivieren, sodass Benutzer die ID- und Namenstextfelder nicht eingeben können.

Answer 1

Sie können leicht Ihre eigene Direktive hierfür erstellen, dies wird alle Eingaben innerhalb des Elements (Formular in Ihrem Fall) deaktivieren;

yourModule.directive('disableForm',function(){ 

    return{ 
     scope:{ 
     disableForm:'=' 
     } 
     link:function(scope, element){ 
     if(scope.disableForm){ 
      angular.element('input',element).attr('disabled','disabled') ; 
     } 
     } 
    } 
    }); 

und in HTML,

<form name="form" role="form" novalidate disable-form="condition" ... 

Answer 2

Div nicht Konzept der Sperrung haben. Eingabe haben ein Konzept von readonly. Sie können das ng-readonly Attribut verwenden, um die Variable mit der Bindung, die bestimmt, ob das Formular nur

<input type="text" class="form-control" name="id" ng-model="study.id" ng-readonly="readMode">

Answer 3

Sie ‚fieldset‘ anstelle von ‚div‘ verwenden können gelesen und es wird alle Formularelemente im Inneren deaktivieren, wenn Sie fügen ng-disabled hinzu. finden Sie unter:

<fieldset ng-disabled="true"> 
<label>ID</label> <input type="text" class="form-control" 
     name="id" ng-model="study.id"> 
<label>Name</label> <input type="text" class="form-control" 
     name="name" ng-model="study.name" ng-minlength=1 
     ng-maxlength=50 ng-required="true"> 
</fieldset> 

Answer 4

Einfach, erstellen Sie eine Variable zum Beispiel „disableAll“ und die Verwendung ng-disabled = „disableAll“ an Orten, wo Sie steuern möchten, aktivieren/deaktivieren. Im folgenden Beispiel habe ich geändert ursprünglichen Code und Sie können es, indem unter Leitung aktivieren und deaktivieren:

<div ng-init="disableAll=true" > 

hier ist der Code:

<div ng-controller='myCtrl'> 

<div ng-init="disableAll=true" > 
<form name="form" role="form" novalidate 
class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" 
ng-submit="createStudy()" > 



<div class="form-group" > 
    <label>ID</label> <input type="text" class="form-control" 
     name="id" ng-model="study.id" ng-disabled="disableAll"> 
</div> 

<div class="form-group" > 
    <label>Name</label> <input type="text" class="form-control" 
     name="name" ng-model="study.name" ng-minlength=1 
     ng-maxlength=50 ng-required="true" ng-disabled="disableAll"> 
</div> 



<div class="modal-footer"> 
    <a href="#/studies"><button type="button" class="btn btn-default" 
     data-dismiss="modal" ng-click="clear()" ng-disabled="disableAll"> 
     <span class="glyphicon glyphicon-ban-circle"></span> Cancel 
    </button></a> 

    <button type="submit" ng-disabled="disableAll" 
     class="btn btn-primary"> 
     <span class="glyphicon glyphicon-save"></span> Save 
    </button> 
</div> 

</form> 
</div> 
</div> 

Answer 5

Diese Direktive gut für mich gearbeitet hat: https://github.com/PLEEROCK/angular-disable-all

Answer 6

im Haupt <div> Sie schreiben:

<div ng-class="{'my-disable':condition}"> 

in der CSS-Datei:

.my-disable{ 
    pointer-events:none; 
} 

Answer 7

Sie die CSS bearbeiten/weniger alle Elemente innerhalb des behinderten div abzuschalten.

Zum Beispiel:

stellen Sie die .disabled-Klasse in html:

<div ng-disabled="disableExpression" 
    ng-class="{'disabled': disableExpression}" 
> 
    <!-- content --> 
</div> 

Stil Ihre Behinderte div:

.disabled{ 
    opacity: 0.5; 
    pointer-events: none; 

    > * { 
    opacity: 0.5; 
    pointer-events: none; 
    } 
}