Question

我是AngularJS的新手。我试图通过recipe过滤提供给范围的recipeService个对象列表。我的对象出现，但没有应用过滤器。

如果我将$scope项直接附加到recipes中名为controller.js的变量，而是使用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();

Answer 1

这是一个显示此工作的快速弹药。

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

使用promises可能会出现问题。也许，我不记得了。如果它有问题你可以做一些不同的事情。使用

$q.defer()

或

$rootScope.$broadcast('something');

更新变量

修改

并不是说你错误地使用了promises，有时候因为设置变量有一个延迟而且它错过了摘要周期。

修改2

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

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

然后处理控制器中的承诺

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

Answer 2

好的，我解决了这个问题。我尝试了@ribsies提供的替代方案，他们取得了与op相同的结果。食谱被发布到html，但过滤器仍然无法正常工作。

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

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

2 个答案: