带角度流星的集合上的多个滤镜

时间:2015-11-04 18:11:10

标签: angularjs meteor angular-meteor

我正在关注Meteor To-Do App tutorial with Angular integration并且正在学习过滤集合。我已经能够按照本教程中的原则对我正在处理的应用程序的集合实现一个简单的过滤器,但现在我不得不试图找出如何向过滤器添加多个查询。

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

观察

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

收集过滤器

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

如何使查询支持多个过滤器?例如,假设我选择扩展示例并按优先级对每个待办事项进行排名。然后,我将有一个输入字段供用户按优先级过滤集合,其值绑定到$scope.priority。现在,如果我想通过不完整和优先级= $ scope.priority任务过滤待办事项列表,我理解Mongo查询需要与Tasks.find({ $and: [{ checked: {$ne: true} },{ priority: $scope.priority }]},{ sort: { createdAt: -1 } })一致。

在我的应用中,我已经能够让两位观察者正确跟踪两个范围变量的变化,类似于$scope.hideCompleted$scope.priority的示例,但我不知道如何采取过滤集合时合并查询的下一步。我也用this package进行了一些修改,因为我最终希望能够按照许多标准进行过滤和排序,但在切换到我的概念之前,我并没有太过分。这里描述。

我很感激任何帮助。谢谢!

2 个答案:

答案 0 :(得分:1)

这将是我的方法:

$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 } });
        });
    // });
});

这里有几件事:

  1. 删除autopublish后,您可以取消注释$scope.$meteorSubscribe方法,并将"yourSubscription"替换为您实际订阅的名称。
  2. 每次$meteor.autorun变量发生变化时,
  3. getReactively都会触发。
  4. $scope.$meteorSubscribe$scope.$meteorCollection受到青睐,因为它们会在范围被销毁时删除订阅和对象/集合。
  5. 如果您有任何问题,那么我可以设置一个演示供您查看。

答案 1 :(得分:0)

嗯,我想我的距离比预期的要近得多,所以我会回答我的问题并分享我为实现待办事项的假设扩展而实施的多个过滤器。

我将hideCompletedpriority范围变量放入范围对象model的属性中,并在末尾使用一个带有参数true的观察者来检查对象相等(任何更改为model或其属性)。然后我通过拼接和#34;子查询生成$scope.query。"我已添加以下代码。

这似乎现在工作正常,但我不确定它是否是最好的解决方案,所以我会继续尝试,如果我发现更好的话,我会更新我的答案。不过,我对任何其他方法都感兴趣!

<强>观察

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}})
});