Add an option to hide completed tasks, and show incomplete task count

meteor · Jun 17, 2015 · f11a875 · f11a875
1 parent f285fe5
commit f11a875
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/simple-todos-angular.js b/simple-todos-angular.js
@@ -17,8 +17,8 @@ if (Meteor.isClient) {
   angular.module("simple-todos").controller("TodosListCtrl", ['$scope', '$meteor',
     function($scope, $meteor){
 
-      $scope.tasks = $meteor.collection(function(){
-        return Tasks.find({}, {sort: {createdAt: -1}})
+      $scope.tasks = $meteor.collection(function() {
+        return Tasks.find($scope.getReactively('query'), {sort: {createdAt: -1}})
       });
 
       $scope.addTask = function(newTask){
@@ -28,5 +28,16 @@ if (Meteor.isClient) {
         );
       };
 
+      $scope.$watch('hideCompleted', function() {
+        if ($scope.hideCompleted)
+          $scope.query = {checked: {$ne: true}};
+        else
+          $scope.query = {};
+      });
+
+      $scope.incompleteCount = function () {
+        return Tasks.find({checked: {$ne: true}}).count();
+      };
+
     }]);
 }
diff --git a/todos-list.ng.html b/todos-list.ng.html
@@ -1,6 +1,11 @@
 <div class="container">
 	<header>
-		<h1>Todo List</h1>
+		<h1>Todo List ({{incompleteCount()}})</h1>
+
+		<label class="hide-completed">
+			<input type="checkbox" ng-model="$parent.hideCompleted"/>
+			Hide Completed Tasks
+		</label>
 
 		<form class="new-task" ng-submit="addTask(newTask); newTask='';">
 			<input ng-model="newTask" type="text" name="text" placeholder="Type to add new tasks" />