Using AngularJS to get the count of a sub array

Question

Basically I'm making a todo list with angular and I want to display the how many items have been marked as done I have an array object of Lists and each list has a collection of list items called todos like so:

[{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" }
                                                                                    ]}];

So I have two ng-repeats.. One repeats the Lists then another inside of it prints out each list item. I have an H1 and next to the title I want to have the the items that were marked isDone as true next to the total amount of records to show how many items you have left. As you can see I started to code up a filter but I believe it's wrong I keep getting: "Syntax Error: Token 'undefined' is unexpected, expecting [}] at column null of the expression [ (list.todos |] starting at [{4}]." which I'm not really sure what that means...my fourth item is blank? Yet I have all my todos there and they are not blank. Is my filter wrong? or a better way to do this?

  <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>

keithm · Accepted Answer · 2016-05-24 14:04:23Z

2

Can you try:

<h1 class='centerTitle'>{{list.listName}} <span class="listCounter"> {{ (list.todos | filter: {isDone: true}).length }} / {{list.todos.length}}</span></h1>

answered May 24, 2016 at 14:04

keithm

9586 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mickey Sly Over a year ago

Thank you so much!

keithm Over a year ago

No problem at all :)

Collectives™ on Stack Overflow

Using AngularJS to get the count of a sub array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related