Как фильтровать данные таблицы с помощью Angular и Angularfire при нажатии кнопки с использованием нескольких видов?

Question

OK. Я искал дни для подходящего ответа на мой вопрос, но я не могу найти ответ. Возможно, что я пропустил много вещей, но я принципиально новичок в кодировании (+1 месяц).

Я работаю над проектом Angular + Firebase/Angularfire, который требует приложения todo. Это звучит довольно просто, но я добавляю некоторые дополнительные функции. Одна из особенностей, с которой у меня возникли проблемы, - это фильтрация недопустимых томов и тех, которые завершены из одного шаблона в другой.

То, что я хотел бы сделать, это переместить все помеченные пометкой «сделанные», при нажатии на другую таблицу в другом представлении шаблона. До сих пор я написал 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 для флажков для установки значения Done (в home.html и complete.html). Это сэкономит сделанное значение для firebase.

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

Во-вторых, для complete.html шаблона, добавьте этот фильтр к вашему нг-повтора.

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