AngularJS에서 즐겨 찾기 목록 만들기

Question

사용자 선택에 따라 내 응용 프로그램에서 즐겨 찾기 목록을 만들고 싶습니다. 내 애플 리케이션에서, 나는 $http.get()과 함께로드 된 텍스트 묶음과 함께 긴 JSON 파일을 사용한다. 내보기에 콘텐츠를 표시하기위한 코드입니다.

<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를 클릭하고 배열로 밀어 :

<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"의 모든 favourited 항목의 세부 사항을 가지고

$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. 
} 

, 당신은 당신의 호의에 해당 정보를 사용할 수 있습니다 다음 favourited 항목을 사용자가 클릭 할 때마다 밀어 ite 목록. 보다 정확한 결과를 얻으려면 중복을 확인하면서 사용자가 특정 항목과 상호 작용 한 횟수를 기록하여 목록 상단에 가장 많은 상호 작용을 한 항목을 표시 할 수 있습니다. 희망이 도움이 :)

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>