有没有办法在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

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

即在您的控制器中，您可以将"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 交换为任何不同的存储介质。

附言口袋妖怪的复数形式是口袋妖怪:P也许你可以把它重命名pokemonItem in pokemonList。