disabling a div in angularjs using ng-disabled

Question

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.

You can't disable <div/>! I don't know what's there in ionic though — Dhaval Marthak
– Dhaval Marthak, Commented Oct 6, 2017 at 5:52
You can use css. Disable pointer-events. Only problem is this is new CSS, so won't work on old browsers. — Kaustubh Khare
– Kaustubh Khare, Commented Oct 6, 2017 at 5:58
I've also tried using fieldset in place of div. -- enclosing a div within the fieldset and set ng-disabled to fieldset should work. — Sajal
– Sajal, Commented Oct 6, 2017 at 6:05

Manikandan Velayutham · Accepted Answer · 2017-10-06 06:06:10Z

15

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

edited Oct 6, 2017 at 6:06

answered Oct 6, 2017 at 5:59

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankush Jain · Accepted Answer · 2017-10-06 06:08:12Z

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>

Gaurav Srivastava · Accepted Answer · 2017-10-06 06:02:40Z

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>

Collectives™ on Stack Overflow

disabling a div in angularjs using ng-disabled

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related