Question

我正在AngularJs构建一个webApp，我有一些产品。这些产品显示在具有不同状态（喜欢/不喜欢）的不同页面中，例如：

首页 - 所有产品;
类别页面 - 此特定类别的产品;
公司页面 - 此特定公司的产品;
用户页面 - 如果用户已登录;

它还有一个“收藏产品”选项，只有在用户登录时才会启用。

我的疑问是，我怎么能：

只加载一次产品清单？
仅在用户登录时应用favorite=true
根据类别或公司过滤产品清单？
有功能切换收藏夹吗？

我现在面临的问题是因为在类别页面中，我需要过滤列表。阅读一些文章，他们建议不要在filter | {condition}内使用ng-repeat，而是在控制器中使用$filter。由于这个应用程序涉及很多产品我试图坚持它（也已经做了一些基本的测试，并有改进）。

我拥有的是什么：

目前，由于我正在使用ui-router，我正在加载状态的resolve上的数据，然后我会将其传递给我的mainController。

.state('app', { //Main State
    resolve: {
        mainProduct: function (factMain) {
            var func = 'get_product';
            return factMain.methodGet(func);
        }
    }
})

好的，现在我有了清单，可以使用它。在mainController我检查用户是否已登录每个stateChangeStart，如果他已登录，我将加载他拥有的收藏夹列表并使用angular.forEach更新产品。所有这些都在mainController。

中

之后我需要根据用户的页面显示这些产品，例如，如果他在主页上，没有问题，一切都已完成，我只需要展示产品。

但如果他属于“鞋子”类别，我需要过滤此列表以仅显示“鞋子”，并检查最喜欢的产品。

我在categoryController中获取了主要状态解析引用的列表，如下所示：

.state('category/:idCategory', { //Main State
    resolve: {
        categoryProduct: function (mainProduct) {
            return mainProduct;
        }
    }
})

然后我将不得不重新做一切...检查用户是否已登录，应用收藏夹，过滤列表，发送到HTML。

我想优化这个过程。我尝试使用factory来设置此产品列表，但由于它有一些$ http等待承诺，如果我首先在主页之前输入“类别页面”，则产品尚未设置。

在factory内部，我尝试使用这些功能：setProduct，getProduct，clearProduct（用于在用户注销时清除收藏夹状态）。

关于如何解决这个问题的任何想法？

Answer 1

要先回答您的上一条评论，您可以存储请求的结果，然后在需要时检索并重新使用它们。首先，我会将所有请求放在服务或工厂中。

app.factory('DataService', function($http) {
  var categories;
  var requestCategories = function() {
    $http.get("/api/getCategories").then(
        function(results){
            categories = results;
        });
  };
  var getCategories = function() {
    return categories;
  };
  return {
    requestCategories : requestCategories, // this will make a http request and store the result
    getCategories : getCategories // this will call the stored result (without making a http request)
  }
});

现在您有两个功能requestCategories和getCategories。

requestCategories将在调用时发出http请求，并将返回值存储在变量中 getCategories将从变量中获取值，而不会发出请求

myApp.controller('MyController', function ($scope, DataService) {
  var init = function (){
    DataService.requestCategories(); // this will make the http request and store the result
    $scope.categories = DataService.getCategories(); // this will get the result
  };

  var justGetValues = function(){
    $scope.categories= DataService.getCategories(); // this will get the result (without making a http request)
  };
});

现在您已经存储了所有类别，现在可以angular filter来过滤和切换要显示的内容

<div ng-repeat="category in categories | filter:{ type: by_type }"> // by property

或

<div ng-repeat="category in categories | filter: by_favorites"> // by custom filter

和自定义过滤器的代码：

app.filter('by_favorites', function () {
  return function (items) {
    var filtered = [];
    // do logic here
    return filtered;
  };
});

AngularJs以多页显示产品

我的疑问是，我怎么能：

我拥有的是什么：

1 个答案: