javascript - 有没有办法在 ngif (AngularJS) 中检查 localStorage 变量

Question

我在缓存某些内容时设置了一些本地存储变量。

我想在一个带有 ng-repeat 的列表中显示一个项目已被缓存，所以我必须查看 item.name 是否在本地存储中(大概在图标元素上有一个 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>

这显然行不通，但还有其他方法可以使它起作用吗？

Answer 1

我建议不要在 View 中使用复杂的逻辑。为什么不直接处理 Controller 或服务中的逻辑？

即。在您的 Controller 中，您可以将“isCached”属性映射到“口袋妖怪”列表中的每个项目。

例如:

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

$scope.pokemons = pokemons;

然后当这个列表在 View 中呈现时，您只需要做:

<i class="icon ion-eye" ng-if="pokemon.isCached"></i>

事实上，我会使用一个中间层，比如名为 CacheService 的自定义服务处理从 localStorage 保存和读取数据，因为这将使将来更容易将 localStorage 交换为任何不同的存储介质。

附言Pokemon 的复数形式是 Pokemon :P 也许你可以重命名它 pokemonItem in pokemonList .