Javascript 仅在AngularJS中显示某些项目_Javascript_Angularjs_Ionic Framework

Javascript 仅在AngularJS中显示某些项目

javascript angularjs ionic-framework

Javascript 仅在AngularJS中显示某些项目,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我是AngularJS和Ionic框架的新手，使用basic，我希望能够“收藏/书签”一些项目，并将它们显示在不同的选项卡上我的books.js结构如下： .factory('Books', function() { // books data var books = [{ id: 0, title: 'Sample Title', author: 'Sample Author', category: 'Horor, Fiction', cov

我是AngularJS和Ionic框架的新手，使用basic，我希望能够“收藏/书签”一些项目，并将它们显示在不同的选项卡上

我的

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:在查看Andy的示例后，我对

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>

我不能列出我最喜欢的书

下面是一个例子：

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>


所有书籍

{{book.title}

最喜欢的书

{{book.title}

下面是一个例子：

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>


所有书籍

{{book.title}

最喜欢的书

{{book.title}

就“最爱”而言，我建议你为每一本书增加另一个价值。然后根据用户选择将它们设置为真/假，然后您只需使用

过滤器

并显示所有favourites@A.J因此，为所有对象添加另一个值，如

fav:false

，并使用

ng单击

将每个单独的项目设置为

true

？是的，这就是我的建议。如果创建新对象，则需要管理这两个对象。所以我建议你用这个。你能提供一个如何做的例子吗？我正在尝试，现在我有点失去了一个“宠儿”，我建议你为每一本书增加另一个价值。然后根据用户选择将它们设置为真/假，然后您只需使用

过滤器

并显示所有favourites@A.J因此，为所有对象添加另一个值，如

fav:false

，并使用

ng单击

将每个单独的项目设置为

true

过滤器

并显示所有favourites@A.J因此，为所有对象添加另一个值，如

fav:false

，并使用

ng单击

将每个单独的项目设置为

true

？是的，这就是我的建议。如果创建新对象，则需要管理这两个对象。所以我建议你用这个。你能提供一个如何做的例子吗？我正在尝试它，现在我是一个损失巨大的例子，但是我使用了一个

工厂

作为数据，在我的代码中实现你的例子，会是这样的吗？使用

isFavorite:null，

变量？这是一个设计决策。如果你想用不同的控制器标记和取消标记收藏夹，那么将其放在工厂可能是有意义的。我已经更新了问题，反映了变化，我认为我在控制器中做错了什么，我不能列出fav Books哦，哈哈，谢谢，傻我：）。一个简单的问题，删除功能可以工作，但是当我关闭应用程序并再次打开它时，删除的项目仍然存在。这是

splice

的默认行为吗？现在，您的整个应用程序状态都存在于单个浏览器会话中。刷新浏览器时，应用程序将重新启动。如果您将更改存储在本地存储中或使用。很好的示例，但是我正在使用

工厂

来保存数据，要在我的代码中实现您的示例，会是这样吗？使用

isFavorite:null，

splice

工厂

来保存数据，要在我的代码中实现您的示例，会是这样吗？使用

isFavorite:null，

splice

的默认行为吗？现在，您的整个应用程序状态都存在于单个浏览器会话中。刷新浏览器时，应用程序将重新启动。如果将更改存储在本地存储中或使用，则可以保留更改。