当使用多个视图单击按钮时，如何使用Angular和Angularfire过滤表数据？

Question

好。我已经搜索了几天来回答我的问题，但我找不到相关的答案。我可能忽略了很多东西，但我基本上不熟悉编码（+1个月）。

我正在开发一个需要todo app的Angular + Firebase / Angularfire项目。这听起来很简单，但我正在添加一些额外的功能。我遇到麻烦的一个功能是过滤未完成的待办事项以及从一个模板到另一个模板完成的待办事项。

我想要做的是将所有标记为“完成”的待办事项移动到另一个模板视图中的另一个表格中。到目前为止，我已经编写了3个HTML模板：home（输入todos的地方），已完成并已过期（我仍在处理这个问题，这是另一个问题！）。使用ui-view和导航按钮更改视图时，所有模板都正常工作。

在模板包含相同HTML表的那一刻，当然，当数据放在“home”模板中时，我在表中获得相同的数据。这不是问题;我知道会发生这种情况。

（试图发布图片，但我没有10个声望点！）这是Plnkr：My Todo App

问题是：如何在“主页”模板上检查时，如何过滤数据，以便只有那些标记为完成的模板出现在“完整”模板中？我知道我必须写一个过滤器，但我不确定最好的方法。

（我最近从一个按钮切换到一个复选框，只是为了让自己更容易看到事情是如何工作的。）

<div class='row'> 
    <div class='col-md-10'>
    <table class='table table-hover'>
        <thead>
            <tr>
                <th>#</th>
                <th>Todo</th>
                <th>Date Due</th>
                <th>Done</th>
                <th></th> 
            </tr>
        </thead>
        <tbody>
            <tr class='results' ng-repeat='todo in todos'>
                <td><span>{{$index + 1}}</scan></td>
                <td><span>{{todo.text}}</span></td>
                <td><span>{{todo.date}}</span></td>
                <td><input type='checkbox' ng-model='todo.done'><span class='done-{{todo.done}}'></span></td>
                <td><button class='btn btn-danger' ng-click='removeTodo(todo)'>Delete</button></td>
            </tr>
        </tbody>
    </table>
</div>
</div>

这是相应的脚本：

app.controller('HomeCtrl', function($scope, $firebase) {
  var ref = new Firebase('https://xxxx.firebaseio.com/');
  var sync = $firebase(ref);

  $scope.todos = sync.$asArray();

  $scope.addTodo = function() {
    $scope.todos.$add({
      text: $scope.newTodo,
      date: $scope.newDate,
      done: false,
      expired: false
    });
    $scope.newTodo = '';
    $scope.newDate = '';
  };

  $scope.removeTodo = function(todo) {
    $scope.todos.$remove(todo);
  };
});

为了补充这一点，我尝试编写一个可以做到这一点的函数，但是看了这么久，最终导致了Javascript的人才流失。我做过类似的事情：

$scope.completedTodos = function(todo) {
   $scope.todos ... (Have no idea what to do?)
};

是的，这显然不起作用！这就是我考虑过滤数据的原因。我错了！

Answer 1

这里有一些简单的东西，可以帮助您启动和运行。

首先，为复选框添加ng-change属性以设置完成值（在home.html和complete.html中）。这会将完成的值保存到firebase。

<input type='checkbox' ng-model='todo.done' ng-change="todos.$save(todo)">

其次，对于complete.html模板，将此过滤器添加到ng-repeat。

ng-repeat='todo in todos | filter:{done:true}'