[AngularJS]有什么办法来检查本地存储变量在 ngif (AngularJS)

发布时间: 2017/4/16 20:41:16
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我得到了我时我缓存的东西设置一些 localstorage 变量。

我想要显示在列表中的 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>

这显然不起作用,但是否有任何其他方式,使这项工作呢?

解决方法 1:

我劝你们不要使用复杂的逻辑视图中。为什么不只是处理的逻辑控制器或服务中?

ie。在你的控制器中,你可以"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 换任何不同的存储介质。

P.S.口袋妖怪的复数形式是宠物小精灵︰ P 也许你可以重命名它 pokemonItem in pokemonList

赞助商