0

I'm trying to disable a div after clicking the button using angularjs.I've tried using ng-disabled attribute in my div.But I'm unable to do this.Can anyone please help me out regarding this issue ...

My html code:

 <button style="margin-left: 22px; margin-top: 16px; background-color: #73AD21" ng-click="getHome()">Home</button>

<div style="margin-top: 15px; display: inline-block"
                    ng-repeat="imageSource in imageSources">
                    <img width=40 height=50 style="margin-left: 12px;"
                        ng-src="{{imageSource}}" /> <br> <span
                        style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
                </div>

My js code:

$scope.imageSources = [];
    $scope.imageSources.push('images/Open.png');
    $scope.imageSources.push('images/New.jpg');
    $scope.imageSources.push('images/Save.png');

    $scope.getFilenameFromPath = function(filename) {
        return filename.split("/")[1].split(".")[0];
    }
$scope.getHome = function() {

        window.location = "./Home.html";
    }
Improve this question
4
  • Why not use ng-show/hide or ng-if? Commented Jan 4, 2016 at 12:06
  • What do you want to achieve really, what you tried Commented Jan 4, 2016 at 12:08
  • Actually,I'm using the same header for 3 different pages.For some pages I want to disable one of the div's and the remaining should be kept active.So,I'm not using show/hide option over here. Commented Jan 4, 2016 at 12:10
  • Please see similar question: stackoverflow.com/questions/16733299/… You can use a binary variable. Very straight-forward. Commented Jan 4, 2016 at 12:11

1 Answer 1

Reset to default
0

html file I added ng-class={'disabled':isClicked}

 <button style="margin-left: 22px; margin-top: 16px; background-color: #73AD21" ng-click="getHome()" ng-class={'disabled':isClicked}>Home</button>

<div style="margin-top: 15px; display: inline-block"
                    ng-repeat="imageSource in imageSources">
                    <img width=40 height=50 style="margin-left: 12px;"
                        ng-src="{{imageSource}}" /> <br> <span
                        style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
                </div>

in js I added one proeperty isClicked

$scope.imageSources = [];
    $scope.imageSources.push('images/Open.png');
    $scope.imageSources.push('images/New.jpg');
    $scope.imageSources.push('images/Save.png');

    $scope.getFilenameFromPath = function(filename) {
        return filename.split("/")[1].split(".")[0];
    }

$scope.isCliked =  false;

$scope.getHome = function() {

        $scope.isClicked = !$scope.isClicked;
        window.location = "./Home.html";
    }

and I also added one css class .disabled 

.disabled{
    pointer-events:none;
}

when you click isClicked become true and button element add .disabled class

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

4 Comments

I've tried using the above suggested code,but unable to disable the div.I'm not getting where I'm going wrong
I'm trying to disable the "imageSources" div soon after clicking on the home button
you can add ng-class={'disabled':isClicked} this on "imageSources" div
No,I'm unable to disable the div even after adding ng-class={'disabled':isClicked} on "imageSources" div

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.