collection 和 angular-meteor 上的多个过滤器

Question

我正在关注 Meteor To-Do App tutorial with Angular integration 并且正在学习过滤 collection。我已经能够按照教程中的原则在我正在开发的应用程序的 collection 上实现一个简单的过滤器，但现在我一直在尝试弄清楚如何向过滤器。

在示例中，您可以通过切换复选框来查看未完成的任务。这是在控制器中通过观察 $scope.hideCompleted 变化并将其作为 Mongo 查询传递来过滤 Meteor collection.

来实现的

观察者

$scope.$watch('hideCompleted', function() {
  if ($scope.hideCompleted)
    $scope.query = {checked: {$ne: true}};
  else
    $scope.query = {};
});

Collection 过滤器

$scope.tasks = $meteor.collection(function() {
  return Tasks.find($scope.getReactively('query'), {sort: {createdAt: -1}})
});

如何使查询支持多个过滤器？ 例如，假设我选择扩展示例并按优先级对每个 to-do 项目进行排名。然后我会有一个输入字段供用户按优先级过滤 collection，其值绑定到 $scope.priority。现在，如果我想通过不完整和 priority=$scope.priority 任务过滤 to-do 列表，我知道 Mongo 查询需要类似于 Tasks.find({ $and: [{ checked: {$ne: true} },{ priority: $scope.priority }]},{ sort: { createdAt: -1 } }) .

在我的应用程序中，我已经能够让两个观察者正确跟踪对两个范围变量的更改，类似于我使用 $scope.hideCompleted 和 $scope.priority 的示例，但我不知道如何在筛选 collection 时采取下一步合并查询。我还对 this package 进行了一些修改，因为我最终希望能够根据许多标准进行过滤和排序，但在切换到我已经掌握的概念之前我并没有深入了解它此处描述。

如果您对此有任何帮助，我将不胜感激。谢谢！

Answer 1

好吧，我想我比我预期的要近得多，所以我会回答我的问题并分享我为实现关于待办事项应用程序的假设扩展的多个过滤器所做的工作。

我将 hideCompleted 和 priority 范围变量设为范围对象 model 的属性，并在末尾使用带有参数 true 的单个观察者进行检查对于对象相等（对于 any 更改为 model 或其属性）。然后我通过拼接在一起生成 $scope.query "sub-queries." 我添加了下面的代码。

目前这似乎工作正常，但我不确定它是否是最佳解决方案，所以我会继续试验，如果我发现更好的东西，我会更新我的答案。不过，我会对任何其他方法感兴趣！

观察者

var initQuery=true;    
var subQueries=[];
$scope.$watch('model', function() {
  if (!initQuery){
    subQueries=[];
    if ($scope.model.hideCompleted)
      subQueries.push({checked: {$ne: true}});
    if ($scope.model.priority)
      subQueries.push({priority: $scope.model.priority});
    $scope.query = { $and: subQueries};
  } else {
    initQuery = false;
    $scope.query = {};
  }
}, true);

过滤集合（不变）

$scope.tasks = $meteor.collection(function() {
  return Tasks.find($scope.getReactively('query'), {sort: {createdAt: -1}})
});

Answer 2

这将是我的方法：

$meteor.autorun($scope, function() {
    // uncomment subscribe after you've got to that point
    // $scope.$meteorSubscribe('yourSubscription').then(function() {
        $scope.tasks = $scope.$meteorCollection(function() {
            return Tasks.find({ 
                checked: $scope.getReactively('model.hideCompleted'),
                priority: $scope.getReactively('model.priority')
            }, { sort: { createdAt: -1 } });
        });
    // });
});

这里有几件事：

删除 autopublish 后，您可以取消注释 $scope.$meteorSubscribe 方法并将 "yourSubscription" 替换为您实际订阅的名称。
$meteor.autorun 将在每次任何 getReactively 变量更改时触发。
$scope.$meteorSubscribe 和 $scope.$meteorCollection 受到青睐，因为它们将删除订阅，并且 object/collection 当作用域被销毁时。

如果您有任何问题，也许我可以设置一个演示供您查看。

collection 和 angular-meteor 上的多个过滤器

Multiple filters on a collection with angular-meteor

angularjs

meteor

angular-meteor