javascript - Only display certain items in AngularJS -
i newbie angularjs , ionic framework , using basic starter tabs ionic template, want able "favourite/bookmark" items , display them on different tab.
my books.js
structure 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 book', chapters: [ { id : 1, name: 'chapter 1', filename: 'chapter1.html', }, { id : 2, name: 'chapter 2', filename: 'chapter2.html', } ] } ..... return { all: function() { return books; }, // remove book list remove: function(book) { books.splice(books.indexof(book), 1); },
now, if want able add book list, should create new array? or angularjs provide sort of library can store data without creating new list?
i not sure how approach problem.
update # 1: after looking @ andy's example, have made following modifications 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 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 following ng-repeat:
ng-repeat="book in books | filter:{isfavorite:true}"
i can't list favorite books.
here's 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>
Comments
Post a Comment