4

I was trying to use a JavaScript expression with ng-if. However, it didn't do anything. It allways returns false.

What i tried was following:

ng-if="localStorage.getItem('grid-layout') == 'list' (if true, show div)

The div doens't render, because it allways returns false. The grid-layout value is saved in the localStorage. This is not the issue.

I checked the documentation on the website. Angular says the following about ng-if

https://docs.angularjs.org/api/ng/directive/ngIf

If the expression is falsy then the element is removed from the DOM tree. If it is truthy a copy of the compiled element is added to the DOM tree.

Is it possible to use just JavaScript inside ng-if? If not, how can i archieve what i was trying to do?

Improve this question
5
  • Did you try to check localStorage for null or undefined? Maybe your problem here is that you cannot get hold of localStorage like this. Try ng-if="localStorage" then you can rule out this reason. Commented May 31, 2017 at 10:08
  • Yes, i checked it, it isset to the correct value. I checked it both with console.log and inside the devtools Commented May 31, 2017 at 10:10
  • Did you check inside html? Commented May 31, 2017 at 10:10
  • Why would i check it inside the HTML? If its saved i can access it everywhere. Commented May 31, 2017 at 10:11
  • Because it is probably not in the scope. Commented May 31, 2017 at 10:15

4 Answers 4

Reset to default
8

You can use Javascript expression inside an ng-if, but you are only able to access properties that are in the $scope of the current template.

It's unlikely that localStorage would be available to you unless you had specifically added it to the $scope object.

One approach would be to write a function attached to the $scope in your controller: 

//in controller JS
$scope.checkLocalStorage = function() {
    return localStorage.getItem('grid-layout') == 'list';
}

//In template
<div ng-if="checkLocalStorage()"></div>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the awnser, well the problem with this is that i dont have any controller linked to that page. Only a directive. But the directive is called before it.
I can't add a controller to the page. But ive access to a root controller. So i did what u suggested there. It works! Thanks. I accept when SO lets me :)
Can I use === instead == ??
1

Move your logic to the controller:

In HTML call method :

ng-if="checkForLocalStorage()"

and in controller, inject $window and write method like :

$scope.checkForLocalStorage = function(){
   return $window.localStorage.getItem('grid-layout') == 'list' 
}

Further, the better approach is to make boolean property in controller, and bind it to the ng-if. else your method will be called on every model\binding change because of angular digest cycle.

You can do do it like, In controller:

$scope.isGridLayoutList= $window.localStorage.getItem('grid-layout') == 'list' ;

and in HTML : ng-if="isGridLayoutList"

Improve this answer

Comments

0

I don't think you can use localstorage inside the ng-if since ng-if is angular directive it only supports angular expression. one thing you can do is create a scope function and return the localstorage value 

ng-if="getStorage() == 'list'"

$scope.getStorage = function(){
 return localStorage.getItem('grid-layout');
}
Improve this answer

Comments

0

There is no need to store a function in $scope variable and call it in html. You can store the truthy/falsy value directly in a variable and use it in ng-if, Better and reduces lines of code

$scope.toShow = (localStorage.getItem('grid-layout') == 'list');

<div ng-if="toShow"></div>
Improve this answer

1 Comment

Pretty unclear what you're trying to say. Whats LOC?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.