I'm currently working on a to-do list application using Angular. My goal is to show the number of items marked as done from an array object of Lists. Each List contains a collection of to-dos, which are structured like this:
[{listName: "ESSENTIALS", newTodoName:"", newTodoQ:"0", todos: [
{ taskName : "Comb" , quantity: 1, isDone : false , id: "comb" } ]},
{listName: "TOILETRIES", newTodoName:"", newTodoQ:"0", todos: [
{ taskName : "Tooth Brush" , quantity: 1, isDone : false , id: "toothbrush"},
{ taskName : "Tooth paste" , quantity: 6, isDone : false, id: "toothpaste" },
{ taskName : "Deodorant" , quantity: 3, isDone : false, id: "deodorant" }
]}];
In my code, I have two ng-repeats - one for displaying the Lists and another nested within it to display each individual list item. Ideally, I want to include a counter next to the title that shows the number of items marked as done compared to the total amount of records. I tried implementing a filter, but encountered an error message stating: "Syntax Error: Token 'undefined' is unexpected, expecting [}] at column null of the expression [ (list.todos |] starting at [{4}]." This error has me stumped as all my todos appear to be populated correctly. Could my filter logic be incorrect or is there a better approach I should consider?
<div class='row' ng-repeat="list in lists">
<h1 class='centerTitle'>{{list.listName}} <span class="listCounter"> {{ (list.todos | filter:{todos: {isDone: true}}: true).length }} / {{list.todos.length}}</span></h1>
<ul ui-sortable="todoSortable" ng-model="list.todos">
<li ng-class="{taskDone: todo.isDone}" class="todoTask" ng-repeat="todo in list.todos | orderBy: 'isDone' "></li>
<div>