filtering inside todo-list component

Author: aredfox

src/app/todos/components/todo-list/todo-list.component.html

@@ -1,3 +1,3 @@
-<div ng-repeat="todoItem in $ctrl.todoItems">
+<div ng-repeat="todoItem in $ctrl.todoItems | filter:$ctrl.filterBy">
     <span>{{ todoItem.title }}</span>
 </div>

src/app/todos/components/todo-list/todo-list.component.ts

@@ -7,7 +7,8 @@ export class TodoList implements angular.IComponentOptions {
     constructor() {
         this.template = require('./todo-list.component.html');
         this.bindings = {
-            todoItems: '<'
+            todoItems: '<',
+            filterBy: '<'
         };
     }
 }

src/app/todos/containers/todos/todos.container.html

@@ -1,2 +1,8 @@
-<h2>All items</h2>
-<todo-list todo-items="$ctrl.todoItems"></todo-list>
+<uib-tabset>
+    <uib-tab index="0" heading="All">
+        <todo-list todo-items="$ctrl.todoItems"></todo-list>
+    </uib-tab>
+    <uib-tab index="1" heading="Completed">
+        <todo-list todo-items="$ctrl.todoItems" filter-by="{completed:true}"></todo-list>
+    </uib-tab>
+</uib-tabset>

src/app/todos/services/TodoStorageService.ts

@@ -3,8 +3,10 @@ import { TodoItem } from './../models/TodoItem';
 export class TodoStorageService {
 
     todoItems: TodoItem[] = [
-        new TodoItem('Vuilbakken', false),
-        new TodoItem('Afwas', true)
+        new TodoItem('Todo Item 1', false),
+        new TodoItem('Todo Item 2', true),
+        new TodoItem('Todo Item 3', true),
+        new TodoItem('Todo Item 4', false)
     ];
 
     constructor(private $q: angular.IQService) { }