angularjs

Onclick of a button should disable a div in Angularjs

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

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