I am a newbie to AngularJS and Ionic framework and using the basic Starter Tabs Ionic template, I want to be able to "Favourite/Bookmark" some items and display them on a different tab.
My books.js
structure is as follow:
.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);
},
Now, if I want to be able to add that book to a list, should I create a new array? or does angularJS provide some sort of library which can store that data without actually creating a new list?
I am really not sure how to approach this problem.
Update # 1: After looking at Andy's example, I have made the following modifications to the 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;
};
})
and the buttons :
<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>
but using the following ng-repeat:
ng-repeat="book in books | filter:{isFavorite:true}"
I can't list favorite books.
Here's an example:
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;
};
});
The view:
<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>