有没有办法检查 ngif 中的 localStorage 变量（AngularJS）

【问题标题】：Is there a way to check localStorage variable in ngif (AngularJS)有没有办法检查 ngif 中的 localStorage 变量（AngularJS）
【发布时间】：2016-02-24 08:10:04
【问题描述】：

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

我想在一个带有 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>

这显然是行不通的，但是有没有其他方法可以做到这一点？

【问题讨论】：

("pokemon." + pokemon.name) in localStorage 会更好，因为它不加载数据

标签： javascript html angularjs ionic-framework

【解决方案1】：

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

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

例如：

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

$scope.pokemons = pokemons;

那么当这个列表在视图中被渲染时，你只需要这样做：

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

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

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

【讨论】：