在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

傳遞的項目的詳細信息，使用在控制器中定義的函數納克單擊並將它推入數組：

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