Disable a div in AngularJS with ng-click property? - html

Question

I need to disable a div in AngularJS depend on a condition. Yes I can do it by using css change (giving low contrast and less color appearance) in appearance but I have ng-click property in it. So I need to prevent that calling also. How can I do it?
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. It will for each html element which support the disable property (eg : input).
https://docs.angularjs.org/api/ng/directive/ngDisabled
I created a simple fiddle 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 that in controller ie:
<div ng-repeat="item in list.items" ng-click="goToFunction(item)" ng-disabled="true">
and after that in controller:
function goToFunction(item){
if(item.condition == disable){
return false
}
else {
// do something
}
}

Answer 3

To prevent the ng-click functionality based on disable you can do in 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 scenario when div is disabled, click functionality wont do anything, otherwise it will do.