在 AngularJS 中创建收藏夹列表

Question

我想根据用户选择在我的应用程序中创建一个收藏列表。在我的应用程序中，我使用带有一堆文本的长 JSON 文件，其中加载了 $http.get()。 这是在我的视图中显示内容的代码。

<ion-view>
<ion-nav-title></ion-nav-title>
<ion-content>
    <div class="card" ng-repeat="list in items | filter: { id: whichid }">
        <div class="item item-text-wrap"
             ng-repeat="item in list.content | filter: { id2: whichid2 }"
             ng-bind-html="item.description.join('')">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
        </div>
    </div>
</ion-content>

创建收藏列表的基本思想是将显示的文本保存在数组中。之后，我可以轻松地将该数组打印到收藏列表的模板中。

所以问题是如何将文本/数据表单表达式({{ item.name }}, {{ item.description }}) 保存到数组中？或者，如果有人对制作最喜欢的列表有其他想法。

Answer 1

使用 ng-click 将项目详细信息传递给控制器​​中定义的函数，并将其推送到数组中，如下所示：

<ion-view>
<ion-nav-title></ion-nav-title>
<ion-content>
    <div class="card" ng-repeat="list in items | filter: { id: whichid }">
        <div class="item item-text-wrap" ng-click="favouriteThis(item)"
             ng-repeat="item in list.content | filter: { id2: whichid2 }"
             ng-bind-html="item.description.join('')">
            <h3>{{ item.name }}</h3>
            <p>{{ item.description }}</p>
        </div>
    </div>
</ion-content>

在您的控制器中： 编写“favouriteThis”函数，每次用户点击时推送最喜欢的项目：

$scope.favouriteList = [];
$scope.favouriteThis = function (item) {
 $scope.favouriteList.push(item); // make sure to check for duplicates before pushing the item, the logic for which i've not included here. 
}

由于您在“$scope.favouriteList”中拥有所有收藏项目的详细信息，因此您可以直接在收藏列表中使用该信息。为了使其更准确，在检查重复项时，您还可以记录用户与特定项目交互的次数，您可以使用它在列表顶部显示交互最多的项目。 希望这会有所帮助:)

Answer 2

我建议为这种方法创建一个服务/控制器，因为您正在进行返回 JSON 对象的 http 调用（使用服务和控制器）。在服务中有您的功能，如 getFavorites、addToFavorites、deleteFromFavorites 等。这些功能将 http GET/POST/UPDATE 在您的收藏夹列表中。然后，您需要将 JSON 对象返回给控制器。在控制器中，您将控制范围并设置范围变量以在您的应用程序中显示数据。

这是一个基本的例子：

服务

//****************
//Favorite Factory
//****************
.factory('favoriteFactory', function ($http) {
    var favFac = {};
    var favorites = [];

    favFac.getFavorites = function (userId) {
        //$http.get() call to get specific user's favs
    };

    favFac.addToFavorites = function (name, description) {
        //$http.post() call to post to a users favs
    };

    favFac.deleteFromFavorites = function(userId, itemId) {
        //$http.update() call to delete item from users favs   
    }

    return favFac;
});

控制器

     //Favorite Controller
    .controller('FavoritesCtrl', ['$scope', '$stateParams', 'favoriteFactory', function ($scope, $stateParams, favoriteFactory) {

        //Route current user Id to controller. Pass to service to look up their favorites in db
        var userId = $stateParams.id;

        $scope.favorites = favoriteFactory.getFavorites(userId);
        $scope.addToFavorites = function(name, description){
            favoriteFactory.addToFavorites(name, description);
        }
    }])

HTML

<ion-view view-title="Favorites Page" ng-controller="FavoritesCtrl">
  <ion-content>
    <ion-item collection-repeat="favorite in favorites">
        <h3>{{ favorite.name }}</h3>
        <p>{{ favorite.description }}</p>
        <button type="button" ng-click="addToFavorites(favorite.name, favorite.description)">Add</button>
    </ion-item> 
</ion-content>