How to use JavaScript inside ng-if AngularJS?

Question

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?

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. — indexoutofbounds, May 31 '17 at 10:08
Yes, i checked it, it isset to the correct value. I checked it both with console.log and inside the devtools — Red, May 31 '17 at 10:10
Why would i check it inside the HTML? If its saved i can access it everywhere. — Red, May 31 '17 at 10:11

score 8 · Accepted Answer · answered May 31 '17 at 10:12

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>

answered May 31 '17 at 10:12

iamalismith

1,531
9
22

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. – Red May 31 '17 at 10:14
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 :) – Red May 31 '17 at 10:20
Can I use === instead == ?? – Samiul Alam Apr 29 '19 at 09:32

anoop · Answer 2 · 2017-05-31T10:19:17.723

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"

score 0 · Answer 3 · answered May 31 '17 at 10:13

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');
}

Mr_Perfect · Answer 4 · 2017-05-31T10:24:10.200

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>

edited May 31 '17 at 10:24

answered May 31 '17 at 10:17

Mr_Perfect

8,254
11
35
62

Pretty unclear what you're trying to say. Whats LOC? – Red May 31 '17 at 10:22

How to use JavaScript inside ng-if AngularJS?

4 Answers4

Linked