angularjs에서 전체 div 비활성화

angularjs에서 전체 div 비활성화

angularjs에서 전체 div 태그를 비활성화하는 방법이 있습니까?하나의 조건으로 비활성화하는 여러 개의 양식 필드가 포함된 div 태그가 있습니다.이게 가능합니까?아래는 제 코드입니다.사용해보았으나 작동하지 않았다.어떤 제안이든 도움이 될 것입니다.감사합니다. 아래 코드를 참조해 주세요.저는 그 양식을 담은 메인 디바택을 가지고 있습니다.사용자가 ID 및 이름 텍스트 필드에 입력할 수 없도록 조건에 따라 양식을 사용하지 않도록 설정합니다.

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

'div' 대신 'fieldset'을 사용할 수 있으며, 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>

css/less를 편집하여 disabled div 내의 모든 요소를 디세블로 할 수 있습니다.

예를 들어 다음과 같습니다.

.disabled-class를 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;
  }
}

이것에 관한 디렉티브를 간단하게 작성할 수 있습니다.이것에 의해, 요소내의 모든 입력이 무효가 됩니다(경우에 따라서 폼).

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

대체로<div>다음과 같이 씁니다.

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

css 파일:

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

이 지시는 저에게 있어서 효과가 있었습니다.https://github.com/PLEEROCK/angular-disable-all

Div에는 disable 개념이 없습니다.입력에는 다음과 같은 개념이 있습니다.readonly. 를 사용할 수 있습니다.ng-readonly형식이 읽기 전용인지 여부를 결정하는 변수에 바인딩된 속성

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

@Pavi가 언급하는 방법이 있습니다.fieldset:

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

근데 제 경우에는 안 돼서 이렇게 바꿨어요.

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

완벽하게 작동했습니다.

간단히 "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>

지시문을 사용[사용 안 함]하다<fieldset>대신div

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

주의:
비활성화된 포함 요소도 사용합니다.<fieldset>내부 요소

언급URL : https://stackoverflow.com/questions/25561144/disabling-an-entire-div-in-angularjs