CODEWITHSUNDEEP
javascriptarraysangularjs
Mickey Sly
Mickey Sly

Reputation: 429

Using AngularJS to get the count of a sub array

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>

Upvotes: 0

Views: 194

Answers (1)

keithm
keithm

Reputation: 958

Can you try:

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

Upvotes: 2

Related Questions