在angularjs中禁用整个div

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

您可以使用“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>

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

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

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

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

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

完美运行。

Answer 8

简单，创建一个变量，例如“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>

Answer 9

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

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

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