有没有一种方法可以在ngif（AngularJS）中检查localStorage变量？

Question

我有一些本地存储变量，当我缓存某些内容时设置这些变量。

我想在一个列表中用ng-repeat显示已经被缓存的项目，所以我需要检查项目名称是否在本地存储中（可能使用图标元素上的ng-if）。

        <ion-list class="pokemonList">
            <ion-item class="item item-icon-right" ng-repeat="pokemon in pokemons | filter:search.filter" ng-click="goToPokemon(pokemon.url, pokemon.name)">
                {{pokemon.name | capitalize}}                
                <i class="icon ion-eye" ng-if="localStorage.getItem('pokemon.' + pokemon.name)"></i>
            </ion-item>
          </ion-list>

这显然行不通，但还有其他方法使其生效吗？

- Jelmer

---

("pokemon." + pokemon.name) in localStorage 的写法更好，因为它不需要加载数据。 - dandavis

Answer 1

我建议不要在视图中使用复杂的逻辑。为什么不在控制器或服务中处理逻辑呢？

例如，在您的控制器中，您可以将“isCached”属性映射到“pokemons”列表中的每个项目。

例如：

angular.forEach(pokemons, function (value, key) {
    var cacheItemName = 'pokemon.' + pokemon.name;
    value.isCached = localStorage.getItem(cacheItemName) || false;
    pokemons[key] = value;
});

$scope.pokemons = pokemons;

当这个列表在视图中被渲染时，你只需要这样做： 实际上，我会使用一个中间层，比如一个名为CacheService的自定义服务来处理从localStorage中保存和读取数据，因为这样可以更容易地在将来将localStorage换成其他存储介质。

顺便说一下，Pokemon的复数形式仍然是Pokemon :P 也许你可以将其重命名为pokemonItem in pokemonList。

- ngDeveloper