Показать только некоторые товары в AngularJS

Я новичок в системе AngularJS и Ionic и используя базовые Starter Tabs Ionic template, я хочу иметь возможность «Избранные/Закладки» некоторые элементы и отображать их на другой вкладке.Показать только некоторые товары в AngularJS

Моя books.js структура выглядит следующим образом:

.factory('Books', function() { 

    // books data 
    var books = [{ 
    id: 0, 
    title: 'Sample Title', 
    author: 'Sample Author', 
    category: 'Horor, Fiction', 
    cover: '/cover.jpeg', 
    details: 'some details about the book', 
    chapters: [ 
     { 
     id : 1, 
     name: 'Chapter 1', 
     filename: 'chapter1.html', 
     }, 
     { 
     id : 2, 
     name: 'Chapter 2', 
     filename: 'Chapter2.html', 
     } 
    ] 
    } 
    ..... 
    return { 
    all: function() { 
     return books; 
    }, 
    // remove a book from the list 
    remove: function(book) { 
     books.splice(books.indexOf(book), 1); 
    },

Теперь, если я хочу, чтобы иметь возможность добавить эту книгу в список, я должен создать новый массив? или angularJS предоставляет некоторую библиотеку, которая может хранить эти данные без фактического создания нового списка?

Я действительно не уверен, как подойти к этой проблеме.

Обновление # 1: После того, глядя на примере Энди, я сделал следующие изменения в controllers.js

.controller('DashCtrl', function($scope, Books) { 

    $scope.books = Books.all(); 
    $scope.remove = function(book) { 
    Books.remove(book); 
    }; 
    $scope.markFavorite = function(book) { 
    Books.isFavorite = true; 
    }; 
    $scope.unmarkFavorite = function(book) { 
    Books.isFavorite = false; 
    };  
})

и кнопки:

<ion-option-button class="button-assertive" ng-click="remove(book)"> 
    Delete 
</ion-option-button> 
<ion-option-button class="button-positive" ng-click="markFavorite(book)"> 
    Fav 
</ion-option-button>

но с использованием следующего нг-повтор :

ng-repeat="book in books | filter:{isFavorite:true}"

Я не могу перечислить любимые книги.

источник

2015-06-14 Rain Man

Как далеко "любимый" обеспокоен я предлагаю вам добавить еще одно значение для каждого объекта книг. Затем сделайте их истинными/ложными на основе пользовательского выбора, тогда вы можете просто использовать 'filter' и отображать все избранные –

@AJ, поэтому добавьте другое значение, например' fav: false' для всех объектов, и используйте 'ng-click' для установки каждого отдельного item to true? –

Да, это то, что я предлагаю. Если вы создаете новый объект, вам нужно сменить оба объекта. Поэтому я бы предложил использовать это. –

Вот пример:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.books = [ 
    { title: 'Sample Title' }, 
    { title: 'Sample Title 2' }, 
    { title: 'Sample Title 3' }, 
    { title: 'Sample Title 4' } 
    ]; 

    $scope.markFavorite = function(book) { 
    book.isFavorite = true; 
    }; 

    $scope.unmarkFavorite = function(book) { 
    book.isFavorite = false; 
    }; 

});

Вид:

<body ng-controller="MainCtrl"> 

    <p>All books</p>  
    <ul> 
     <li ng-repeat="book in books"><button ng-click="markFavorite(book)">{{book.title}}</button></li> 
    </ul> 

    <p>Favorite books</p>  
    <ul> 
     <li ng-repeat="book in books | filter:{isFavorite:true}"><button ng-click="unmarkFavorite(book)">{{book.title}}</button></li> 
    </ul> 

    </body>

Here's a Plunker.

источник

2015-06-14 03:09:46

отличный пример, но я использую 'factory' для данных, чтобы реализовать ваш пример в моем коде, было бы что-то вроде этого? http://pastebin.com/qv7RGTRi с переменной 'isFavorite: null,'? –

Это дизайнерское решение. Если вы хотите пометить и разблокировать избранные с помощью разных контроллеров, тогда может возникнуть смысл разместить его на заводе. –

Я обновил вопрос, отражая изменения, я думаю, что делаю что-то неправильно в контроллере, что я не могу перечислить книги fav. –

Показать только некоторые товары в AngularJS

ответ

Смежные вопросы