如何在ng-if AngularJS中使用JavaScript？

Question

我試圖使用ng-if的JavaScript表達式。 但是，它沒有做任何事情。 它總是返回false 。

我嘗試的是以下內容：

ng-if="localStorage.getItem('grid-layout') == 'list' （如果為true，則顯示div）

div不會渲染，因為它總是返回false 。 網格布局值保存在localStorage 。 這不是問題。

我檢查了網站上的文檔。 Angular說以下關於ng-if

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

如果表達式是假的，那么該元素將從DOM樹中刪除。 如果它是真實的，則編譯元素的副本被添加到DOM樹中。

是否可以在ng-if使用JavaScript ？ 如果沒有，我怎樣才能實現我想做的事情？

Answer 1

您可以在ng-if中使用Javascript表達式，但只能訪問當前模板的$scope中的屬性。

除非您專門將localStorage添加到$scope對象，否則localStorage不太可能。

一種方法是在控制器中編寫附加到$ scope的函數：

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

//In template
<div ng-if="checkLocalStorage()"></div>

Answer 2

我不認為你可以在ng-if使用localstorage，因為ng-if是angular指令它只支持角度表達式。 您可以做的一件事是創建一個范圍函數並返回localstorage值

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

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

Answer 3

將您的邏輯移動到控制器：

在HTML調用方法中：

ng-if="checkForLocalStorage()"

並在控制器中，注入$window和寫入方法，如：

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

此外 ，更好的方法是在controller創建布爾屬性，並將其綁定到ng-if 。 否則，由於角度摘要周期，您的方法將在每個模型\\綁定更改時被調用。

你可以這樣做，在控制器中：

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

並在HTML中： ng-if="isGridLayoutList"

Answer 4

不需要在$scope變量中存儲函數並在html中調用它。 您可以將truthy / falsy值直接存儲在變量中，並將其用於ng-if ，Better並減少代碼行

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

<div ng-if="toShow"></div>