Onclick of a button should disable a div in Angularjs

Question

I'm trying to disable the div when a button is clicked using Angularjs. Onclick of a home button should disable one div of a same page by keeping the remaining div's active.

How can I achieve this?

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";
}

When I load the page,at the first I need to show the "MyDiv" div as active.when I click on the home button,I should disable the "MyDiv". — dev333
– dev333, Commented Jan 4, 2016 at 9:25
My Div contains set of images which are horizontally aligned.So,I want to disable those images when I click on home button — dev333
– dev333, Commented Jan 4, 2016 at 9:30

xxlali · Accepted Answer · 2016-01-05 07:38:03Z

0

According to your command, the code should be;

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

<div ng-if="showDiv" 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>

Your js code should be;

$scope.showDiv = true;
$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() {
    $scope.showDiv = false;
    window.location = "./Home.html";
}

edited Jan 5, 2016 at 7:38

answered Jan 4, 2016 at 9:13

xxlali

1,0662 gold badges17 silver badges50 bronze badges

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

4 Comments

dev333 Over a year ago

I tried editing by the code you have suggested.But I'm unable to disable the div.

xxlali Over a year ago

when you call getHome you want to hide your div. Did I understand correctly?

xxlali Over a year ago

I have edited the answer please, try and let me know is there any problem.

dev333 Over a year ago

can u please refer this url : stackoverflow.com/questions/34611021/…

Vipin Jain · Accepted Answer · 2016-01-04 10:09:53Z

0

Write ng-disabled in div tag and ng-click="noClickable()" with return false;

<div ng-disabled="disableDiv" ng-click = "noClickable()">....</div>

assign the $scope.disableDiv = true in in the function of controller controller

 $scope.noClickable = function(){
         $scope.disableDiv = true;
         return false; 
 }

  $scope.getHome = function() {
        $scope.disableDiv = true;
        window.location = "./Home.html";
    }

Please see this link Click
I hope this will work

edited Jan 4, 2016 at 10:09

answered Jan 4, 2016 at 9:22

Vipin Jain

3,77618 silver badges36 bronze badges

Collectives™ on Stack Overflow

Onclick of a button should disable a div in Angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related