disabling an entire div in angularjs

Question

Is there a way to disable an entire div tag in angularjs. I have a div tag that contains inside it several form fields that I want to disable with just one condition. Is this possible? Below is my code.I tried using but it did not work. Any suggestions would be helpful. Thanks, please see code below. I have the main div tag that contains the form. I want to disable the form based on a condition, so user cannot enter the id and name text fields.

<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

You can use 'fieldset' instead of 'div' and it will disable all form elements inside it if you add ng-disabled to it. Please find below :

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