在 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>

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

所以问题是如何将 text/data 形式的表达式 ({{ 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

我建议为此方法创建一个 service/controller，因为您正在进行 http 调用 return JSON objects （使用服务，以及控制器）。在该服务中有您的函数，例如 getFavorites、addToFavorites、deleteFromFavorites 等。这些函数将在您的收藏夹列表中 http GET/POST/UPDATE。然后你会想要 return JSON object 到一个控制器。在控制器中，您可以控制范围并设置范围变量以在您的应用程序中显示数据。

这是一个基本示例：

服务

//****************
//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>

在 AngularJS 中创建收藏列表

Create a favorite list in AngularJS

javascript

arrays

angularjs

ionic-framework

angular-ngmodel