Подтвердить что ты не робот

Отключить весь div в angularjs

Есть ли способ отключить весь тег div в angularjs. У меня есть тег div, который содержит внутри него несколько полей формы, которые я хочу отключить только одним условием. Это возможно? Ниже мой код. Я пытался использовать, но он не работал. Любые предложения будут полезны. Спасибо, см. Код ниже. У меня есть основной тег div, который содержит форму. Я хочу отключить форму на основе условия, поэтому пользователь не может вводить текстовые поля id и name.

<div>
<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">
</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">
</div>



<div class="modal-footer">
   <a href="#/studies"><button type="button" class="btn btn-default"
        data-dismiss="modal" ng-click="clear()">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button></a>
    <button type="submit" ng-disabled="form.$invalid"
        class="btn btn-primary">
        <span class="glyphicon glyphicon-save"></span> Save
    </button>
</div>

</form>
</div>
4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете использовать "fieldset" вместо "div", и он отключится     все элементы формы внутри него, если вы добавите к нему ng-disabled.     Ниже вы найдете:

<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>

Ответ 2

Вы можете отредактировать css/less, чтобы отключить все элементы внутри отключенного div.

Например:

установить класс .disabled в html:

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

настройте отключенный div:

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

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

Ответ 3

вы можете легко создать свою собственную директиву для этого, это отключит все входы внутри элемента (форма в вашем случае);

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

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

и в HTML,

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

Ответ 4

в главном <div> вы пишете:

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

в файле css:

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

Ответ 6

Div не имеет понятия об отключении. Вход имеет концепцию readonly. Вы можете использовать атрибут ng-readonly с привязкой к переменной, которая определяет, является ли форма только для чтения

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

Ответ 7

Простой, создайте переменную, например, "disableAll", и используйте ng-disabled = "disableAll" в тех местах, где вы хотите управлять включением/отключением. В приведенном ниже примере я изменил исходный код, и вы можете включить и отключить его, изменив строку ниже:

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

вот код:

<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>