3

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>

1
  • 2
    I believe ngDisabled only really disables inputs and buttons
    – ragamufin
    Feb 18, 2015 at 4:32

2 Answers 2

13

ng-click will be triggered even there is a ng-disabled for img elements.

A simple solution is to change your ng-click to check the parameter

<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled || test()"></img>
0
0

Do this in controller.You don't have add anything new in your Html

var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
    $scope.isEnabled=true; 
    $scope.test = function() {
      if(!$scope.isEnabled) return;
      alert('test');
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.