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

我建议为此方法创建一个服务/控制器，因为您正在进行http调用，返回JSON对象 （使用服务，以及控制器） 。在服务中有你的功能，如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>

在AngularJS中创建收藏列表

2 个答案: