I want to disable my image when I click the toggle button. I think I made the code right but it doesn't work fine. When the toggle is set to true then I click the image it should alert 'test' and when the toggle is set to false then the image is disabled so no alert will show.
But my problem is either true or false when I click the button it's alert test. What is wrong?
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
alert('test');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="main" ng-controller="DemoCtrl">
<h1>Image disable</h1>
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="test()"></img>
<br/>
<button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
{{isEnabled}}
</body>
ngDisabled
only really disables inputs and buttons