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> 

here's plunker.


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -