比较Angular中的数据

Question

我显示JSON文件中的内容，并且必须将JSON文件中的数据与存储在本地存储中的数据进行比较。 显示 真实 JSON数据很好。
但是现在我必须检查该JSON文件中的数据是否包含本地存储数据的项目。

的背景
该列表应该可以选择将项目添加到本地存储，但仅限于该项目尚未在本地存储中可用。

这是我的片段：

控制器（简化）：

// This controller retrieves data from the main json and associates it with the $scope
var ListCtrl = function ($scope, $http, $sce, $location, srvPage, srvGetMetas, srvSiteLang, callRestService, $localstorage) {

    // data from json
    $scope.json = 'games.json';
    var res = callRestService.get({
            id: $scope.json
        }, function() {
            console.log(res);
            $scope.games = res.games;
        }
    );

    // data in the local storage
    $scope.favs = $localstorage.getObject('favs');
    console.log($scope.favs);

    // add data to the favs list
    $scope.add = function(e) {
        var favName = $(e.target).data('name'),
            favShort = $(e.target).data('short'),
            favUrl = $(e.target).data('url');

        // store the favs in the local storage as we have no backend available
        if (localStorage.getItem('favs') === null) {
            var arr = [];
        } else {
            var arr = $localstorage.getObject('favs');
            console.dir(arr);
        }
        arr.push({
            'name': favName,
            'short': favShort,
            'url': favUrl
        });
        $localstorage.setObject('favs', arr);
    };
};
ListCtrl.$inject = ['$scope', '$http', '$sce', '$location', 'srvPage', 'srvGetMetas', 'srvSiteLang', 'callRestService', '$localstorage'];
app.controller('ListCtrl', ListCtrl);

厂：

// call the service
var callRestService = function ($resource) {
    var res = $resource('data/:id');
    return res;
};
callRestService.$inject = ['$resource'];
app.factory('callRestService', callRestService);

模板：

<ul ng-repeat="game in games">
    <li>
        Name: {{game.name}}<br>
        <a href="http://i1.midasplayer.com{{game.url}}" target="_blank">
            <img src="http://i1.midasplayer.com/images/games/{{game.short}}/{{game.short}}_170x80.gif" title="{{game.name}}" />
        </a>
        <a href="#" 
            data-name="{{game.name}}" 
            data-short="{{game.short}}" 
            data-url="{{game.url}}" 
            ng-click="add($event)" prevent-click>Add to favs</a>
            <!-- Here I want to show "Add to favs" or if the item exists in the local storage "Remove from favs" -->
    </li>
</ul>

games.json：

{  
    "games":[  
        {  
            "name":"Item 01",
            "short":"item01",
            "url":"/items/show"
        },
        {  
            "name":"Item 02",
            "short":"item02",
            "url":"/items/show"
        },
        {  
            "name":"Item 03",
            "short":"item03",
            "url":"/items/show"
        },
        {  
            "name":"Item 04",
            "short":"item04",
            "url":"/items/show"
        }
    ]
}

localStorage的：

[
    {
        "name":"Item 02",
        "short":"item02",
        "url":"/items/show"
    },
    {
        "name":"Item 03",
        "short":"item03",
        "url":"/items/show"
    }
]

Answer 1

您可以在Controller中使用一种方法来检查当前游戏是否存在于本地存储中：

$scope.checkLocal(game) {
    for(var i=0; i < $scope.favs.length; i++) {
        if($scope.favs[i].name === game.name) {
            // exists
            return true;
        }
    }
    return false;
}

然后，您可以在HTML中调用此方法来显示/隐藏相关按钮：

<a href="#" 
   ng-show="!checkLocal(game)"
   data-name="{{game.name}}" 
   data-short="{{game.short}}" 
   data-url="{{game.url}}" 
   ng-click="add($event)" prevent-click>Add to favs</a>

<a href="#" 
   ng-show="checkLocal(game)"
   data-name="{{game.name}}" 
   data-short="{{game.short}}" 
   data-url="{{game.url}}" 
   ng-click="remove(game)" prevent-click>Remove from favs</a>