Activate the button when the local storage variable is present

Question

Activate the button when the local storage variable is present

How can I display edit and delete buttons only when local storage is not empty?

In my view.html file, I attempted the following:

<div ng-controller="MainController">     
     <button ng-disabled="localStorage.getItem('wimmtkey') !== null"  > Edit</button>
</div>

Then in the review.controller.js file, I have the following function:

function submit() {  
    if($rootScope.name!=null)    {
        var temp={
            "name":$rootScope.name,
             "surname":$rootScope.surname,
             "email":$rootScope.email
        }
        $scope.localArray.push(temp);
        localStorageService.set("wimmtkey", $scope.localArray);
        $scope.obtained_array = localStorageService.get("wimmtkey"); 

        var Results = UniversalService.PostReview(JSON.stringify(JSONObject));
        }
    }

However, the button always remains visible even when using incognito mode. What could be causing this issue?

javascript angularjs

Answer 1

Answer №1

The button will always be visible because ngDisabled is being used instead of ngShow, ngHide, or ngIf. When ngDisabled is true, the button is simply made unclickable.

Based on the condition, it looks like the button will be disabled if the wimmtkey item exists in localStorage. This seems to contradict what you are aiming for, based on your explanation.

Additionally, have you added localStorage to the $scope object? It's not clear from your code, and you can only utilize it in the view if it is present as $scope.localStorage. Without it, the condition will never be met (and may actually throw an error that Angular ignores), resulting in the button always remaining enabled.

Answer 2

The button will always be visible because ngDisabled is being used instead of ngShow, ngHide, or ngIf. When ngDisabled is true, the button is simply made unclickable.

Based on the condition, it looks like the button will be disabled if the wimmtkey item exists in localStorage. This seems to contradict what you are aiming for, based on your explanation.

Additionally, have you added localStorage to the $scope object? It's not clear from your code, and you can only utilize it in the view if it is present as $scope.localStorage. Without it, the condition will never be met (and may actually throw an error that Angular ignores), resulting in the button always remaining enabled.

Answer 3

Answer №2

To enhance the functionality of localStorage.wimmtkey, consider creating a wrapper:

<div ng-controller="MainController">     
    <button ng-disabled="LS_wimmtkey!==null">Edit</button>
</div>

var MainController = function($scope) {
    $scope.LS_wimmtkey = localStorage.getItem('wimmtkeys');

    $scope.$watch("LS_wimmtkey", function() {
        localStorage.setItem('wimmtkeys', $scope.LS_wimmtkey); 
    });
};

When working with the submit function, ensure you utilize the $scope property:

function submit() { 
    //insert your code here
    $scope.LS_wimmtkey = $scope.localArray;
    //insert your code here
}

Answer 4

To enhance the functionality of localStorage.wimmtkey, consider creating a wrapper:

<div ng-controller="MainController">     
    <button ng-disabled="LS_wimmtkey!==null">Edit</button>
</div>

var MainController = function($scope) {
    $scope.LS_wimmtkey = localStorage.getItem('wimmtkeys');

    $scope.$watch("LS_wimmtkey", function() {
        localStorage.setItem('wimmtkeys', $scope.LS_wimmtkey); 
    });
};

When working with the submit function, ensure you utilize the $scope property:

function submit() { 
    //insert your code here
    $scope.LS_wimmtkey = $scope.localArray;
    //insert your code here
}

Activate the button when the local storage variable is present

Answer №1

Answer №2

Similar questions

Sharing data between two PHP pages via an AJAX request

Postponing a hyperlink during webpage loading

Troubles with displaying Google Maps on Ionic Modal

The ng-change function does not seem to be functioning properly within the UI-select2

Working with promises and Async/Await in Express/node can sometimes feel ineffective

Achieve dynamic styling and adjust window size using window.open

Sending an ArrayBuffer from Angular to Electron results in the window crashing

serverless with Node.js and AWS encountering a 'TypeError' with the message 'callback is not a function'

Unable to permanently uninstall Node.js

Transforming a form containing recurring elements into JSON

In what way does AngularJS asynchronously navigate through the Angular template made up of HTML and AngularJS Directives?

Retrieve the JavaScript object that was initialized within a function

Is it feasible to set a default value in an HTML input field that is not editable using JavaScript?

Where is the best place to insert Javascript code in an HTML file - the head or body section?

The C# MVC Controller is having difficulty retrieving decimal or double values from an Ajax POST request

triggering two separate functions with ng-click

Tips for sending routeparams value to model window in AngularJS

Determine the sequence of a div based on its class

Exploring AngularJS and Express with Node.js: navigating routes and refreshing pages

Hiding or removing DOM elements with ng-bootstrap pagination