disabilitazione di un intero div in angularjs

Question

C'è un modo per disabilitare un intero tag div in angularjs. Ho un tag div che contiene al suo interno diversi campi modulo che voglio disabilitare con una sola condizione. È possibile? Di seguito è riportato il mio codice. Ho provato a utilizzarlo ma non ha funzionato. Qualsiasi suggerimento sarebbe utile. Grazie, per favore vedi il codice qui sotto. Ho il tag div principale che contiene il modulo. Voglio disabilitare il modulo in base a una condizione, in modo che l'utente non possa inserire l'id e denominare i campi di testo.

Answer 1

è possibile creare facilmente la propria direttiva per questo, ciò disabiliterà tutti gli input all'interno dell'elemento (modulo nel caso);

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

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

e in HTML,

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

Answer 2

Div non ha il concetto di disabilitazione. L'input ha un concetto di readonly. È possibile utilizzare l'attributo ng-readonly con legame alla variabile che determina se il modulo è di sola lettura

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

Answer 3

è possibile utilizzare 'fieldset' invece di 'div' e disabiliterà tutti gli elementi dei moduli all'interno se aggiungi ng-disabled ad esso. riporta qui di seguito:

<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

Semplice, creare una variabile, ad esempio "disableAll" e l'uso ng-disabled = "disableAll" nei luoghi in cui si desidera controllare abilitare/disabilitare. Nell'esempio qui di seguito, ho modificato il codice originale e si può attivare e disattivare cambiando sotto la linea:

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

ecco il codice:

<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

Questa direttiva ha funzionato bene per me: https://github.com/PLEEROCK/angular-disable-all

Answer 6

nella principale <div> si scrive:

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

nel file css:

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

Answer 7

È possibile modificare il css/meno per disabilitare tutti gli elementi all'interno del disabile div.

Ad esempio:

impostare la classe .disabled in html:

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

stile il vostro disabilitato div:

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

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