Question

有没有办法在angularjs中禁用整个div标签。我有一个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>

Answer 1

您可以使用＆＃39; fieldset＆＃39;而不是＆＃39; div＆＃39;它会禁用如果向其中添加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>

Answer 2

您可以编辑css / less以禁用禁用div中的所有元素。

例如：

在html中设置.disabled-class：

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

为您的禁用div设置样式：

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

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

Answer 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" ...

Answer 4

你写的主<div>中的

：

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

在css文件中：

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

Answer 5

这条指令对我很有用：https://github.com/PLEEROCK/angular-disable-all

Answer 6

Div没有禁用的概念。输入的概念为readonly。您可以使用ng-readonly属性绑定到确定表单是否为只读的变量

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

Answer 7

简单，创建一个变量例如＆＃34; disableAll＆＃34;并使用ng-disabled =＆＃34; disableAll＆＃34;在您要控制启用/禁用的位置。在下面的示例中，我修改了您的原始代码，您可以通过更改以下行来启用和禁用它：

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

Answer 8

在<fieldset>上使用 [disabled] 指令，而不是div

<fieldset [disabled]="isToDisable()"></fieldset>

注意：
要禁用包含的元素，请尝试在内部也使用<fieldset>元素

Answer 9

@Pavi 提到它，使用 fieldset 的方式：

<fieldset ng-disabled="true"> 
</fieldset >

但在我的情况下不起作用，所以我像这样改变了它：

<fieldset  [attr.disabled]="true">
</fieldset >

完美运行。

在angularjs中禁用整个div

9 个答案: