Disable div in AgularJS using ng-click property?

Question

I need to disable the div in AngularJs depending on the condition. Yes, I can do this using css change (giving low contrast and less color) appearance, but I have the ng-click property. Therefore, I need to also prevent this calling. How can i do this?

Here is my code:

<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true"> 

Answer 1

Yes ng-disabled does not work for div. This will be for every html element that supports the disable property (ex: input). https://docs.angularjs.org/api/ng/directive/ngDisabled

I created a simple script to demonstrate how to achieve it with a simple div http://jsfiddle.net/5Qc5k/1/

 function MyCtrl($scope, $templateCache) { $scope.isDisabled = false; $scope.alertMe = function(){ if($scope.isDisabled === true){ return; } // disable the function $scope.isDisabled = true; alert("foo"); } } 

Answer 2

You can do this in the controller, that is:

 <div ng-repeat="item in list.items" ng-click="goToFunction(item)" ng-disabled="true"> 

and after that in the controller:

  function goToFunction(item){ if(item.condition == disable){ return false } else { // do something } } 

Answer 3

To prevent disable-based ng-click functionality, you can do the following: -

 <div ng-repeat="item in list.items" ng-disabled="item.condition" ng-click="goToFunction(item)"> item.value </div> $scope.goToFunction = function(item){ if(item.condition == false){ // Dont do anything }else{ //do something } 

In this case, when the div is disabled, the click function will do nothing, otherwise it will do.