disabling a div in angularjs using ng-disabled

user_5648804 0
Viewed 12101

I wanted to disable a div section using ng-disabled, but it dint work. I've also tried using fieldset in place of div. ng-disabled seems not working.

Below is the view part: 

<div ng-disabled="model.disableDate">
    <div>Date</div>
    <div ion-datetime-picker ng-model="model.timeEntryDate" ng-change="onTimeEntryDateChange()" date="true" time="false" monday-first="true" am-pm="true">{{model.timeEntryDate|| "Select" | date: "dd/MM/yyyy"}} <i class="icon ion-ios-calendar-outline"></i> </div>
</div>

This is the controller part:

if ($scope.model.pageState === condition) {
    $scope.model.disableDate = true;
}

Any way this calender is being popped even on the disabling condition.

angularjs
3 Answers

You can't disable DIV. Disable work with button and input types only. You can try with css. Use ng-class.

<div ng-class="{ 'div-disabled': model.disableDate}"> // give condition here as per your scenario

.div-disabled
{
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}
user_45274110

You can create an attribute directive to disable any div. See below:

  var app = angular.module("myApp", []);
        app.directive("disableSection", function() {
            return {
                restrict : "A",
                 link:function(scope,element,attr,ctrl){                   
                        element.css({
                          cursor :"not-allowed",
                          opacity: "0.5",
                          background: "#CCC"
                        });
                    }
            };
        });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div disable-section>This is disabled div</div>
</body>

user_12738820

You can use pointer-events: none for disabling the div:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.obj = {};
  $scope.obj.disabled = false;
  
  $scope.clickMe = function(){
  alert('div is enabled');
  }
  
});
.disabled {
    pointer-events: none;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <div ng-class="(obj.disabled)?'disabled':''" style="width:100px;height:100px;border:1px solid black">
  <a style="cursor:pointer" ng-click="clickMe()">Click Me</a>
  </div>
  <button ng-click="obj.disabled = !obj.disabled">{{(obj.disabled)?'Enable':'Disable'}}</button>
</div>

user_27793070
Related