Блог

Я хочу создать список избранных в своем приложении на основе выбора пользователя. В моем приложении я использую длинный файл 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 }}) в массив? Или, если у кого-нибудь есть другая идея для создания этого списка избранных.

Передайте сведения об элементе функции, определенной в вашем контроллере, с помощью 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>
  

В вашем контроллере :
Напишите функцию «Favoritethis», чтобы нажимать на избранный элемент каждый раз, когда пользователь нажимает на него :

 $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.favoritelist», вы можете использовать эту информацию непосредственно в своем списке избранных. Чтобы сделать его более точным, при проверке на наличие дубликатов вы также можете записать количество раз, когда пользователь взаимодействовал с определенным элементом, используя который, вы можете показать наиболее взаимодействующий элемент в верхней части списка.
Надеюсь, это поможет 🙂

Я бы предложил создать сервис / контроллер для этого подхода, поскольку вы выполняете 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>