AngularJS orderBy 过滤器不适用于服务填充的数据答案

【问题标题】：AngularJS orderBy filter not working for data populated by serviceAngularJS orderBy 过滤器不适用于服务填充的数据
【发布时间】：2015-04-15 02:16:24
【问题描述】：

我是 AngularJS 的新手。我正在尝试过滤由recipeService 提供给范围的recipe 对象列表。我的对象出现了，但没有应用过滤器。

如果我将项目直接附加到 $scope 到我的 controller.js 中名为 recipes 的变量，而不是使用 ng-repeat="recipe in recipes"，则过滤器有效。

有什么建议吗？问候。

HTML

<li ng-repeat="recipe in recipeService.allRecipes | orderBy:'name':reverse">{{recipe.name}}</li>

reciperService.service.js 在我的工厂：

var service = {};

service.allRecipes = [];

service.getAllRecipes = function () {
  return $http.get('/api/recipes')
    .success(function (recipes) {
      service.allRecipes = recipes;
      return recipes;
    });
};
return service;

控制器声明中的controller.js：

$scope.recipeService = recipeService;
recipeService.getAllRecipes();

【问题讨论】：

$scope.recipes = recipeService.getAllRecipes();你应该这样做，听起来你知道这行得通。这也是更好的方法。
请提供js小提琴！
过滤器在哪里？
orderby 是一个角度过滤器。你说你按照我描述的方式做的，应该不需要小提琴吧？
@ribsies 我确实尝试过。我应该在op中这么说。如果我尝试这样做，HTML 上不会填充任何内容。任何想法为什么？

标签： angularjs service filter controller angularjs-orderby

【解决方案1】：

这里有一个快速的 plunker 展示了这个工作。

http://plnkr.co/edit/QQmLpmOxUK7rl95hBdIn?p=preview

按照您的方式使用 Promise 可能存在问题。也许吧，我记不得了。如果它有问题，你可以做一些不同的事情。要么使用

$q.defer()

或

$rootScope.$broadcast('something');

更新变量

编辑

并不是你错误地使用了 Promise，只是有时因为设置变量存在延迟并且它错过了摘要周期。

编辑 2

或者，您可以将函数设为承诺并在控制器中处理承诺，这将正确设置变量。这就是我通常做涉及 $http 请求的事情的方式。所以服务将是......

service.getAllRecipts = function() {
  return $http.get(url);
}

然后在你的控制器中处理承诺

var req = recipeService.getAllRecipes();

req.success(function(data) {
  $scope.recipes = data;
}

【讨论】：

谢谢。我在我的应用程序中尝试了你的 plunker 建议，我收到了带有正确数据的承诺，尽管我的 HTML 上没有显示任何内容。这个周末我有更多时间时会考虑这个问题，但我相信解决方案在您的回复中。
我会推荐编辑 2 中的解决方案，它肯定会起作用并更新您的范围变量。
好的。我会试试的。谢谢。
好的，我解决了这个问题。 @ribsies，我尝试了您的替代方案，它们取得了与我在操作中相同的结果。食谱已发布到 html，但过滤器仍然不起作用。我发现问题在于，我需要的不是orderBy:'name':reverse"，而是orderBy:'-name'"。这对我来说是反向过滤的。不确定为什么会这样，但确实如此。

【解决方案2】：

好的，我解决了这个问题。我尝试了@ribsies 提供的替代方案，它们取得了与我在操作中相同的结果。食谱已发布到 html，但过滤器仍然不起作用。

我发现问题在于，我需要的表达式不是orderBy:'name':reverse"，而是orderBy:'-name'"。这对我来说是反向过滤的。不确定为什么会这样，但确实如此。

【讨论】：

哦，呵呵。我什至没有看那个。第三个参数是一个布尔值。所以它是真的还是假的，但无论哪种方式都很好。很高兴你明白了
啊，是的。我不敢相信我错过了第三个参数是一个布尔值。我一定误解了文档。谢谢@ribsies！