How to use Angular $watch with Equality on multiple objects in an array independently of one another?

Question

So I have a Controller with multiple tasklist models in my scope. Something like this.

    $scope.taskslists = [
        {
            id : 1,
            percentCompleted : 0,
            tasks : [
                {
                    completed : false, 
                    description : 'Lorem ipsum dolor sit amet,'
                },
                {
                    completed : false, 
                    description : 'consectetur adipisicing elit, sed do eiusmod'
                },
            ]
        },
        {
            id : 2,
            percentCompleted : 0,
            tasks : [
                {
                    completed : false, 
                    description : 'Lorem ipsum dolor sit amet,'
                },
                {
                    completed : false, 
                    description : 'consectetur adipisicing elit, sed do eiusmod'
                },
            ]
        },
    ];

For each tasklist when a completed value of a task is changed to true or false, i want to update the percentCompleted attribute in my corresponding tasklist model. I was looking at using $watch to accomplish this.

    $scope.$watch('tasklists', function(newValue, oldValue){
            //Calculate percent completed.
            console.log(newValue);
    }, true);

While it fires fine it always returns the entire collection, but I am only interested in the tasklist that got updated out of that collection. I understand that this is an expensive task so I am wondering if there is a way I can be more selective about the values I am listening for and updating. I am pretty new to Angular so I am not sure if this might be the wrong approach all together.

My only goal is to display a progress bar that takes its width from the percent of completed tasks.

    <div ng-repeat="tasklist in tasklists" >
        <div class="progress-bar" style="width: {{tasklist.percent.completed}}%;"></div>
        <ul class="list-unstyled task-list">
        <li ng-repeat="task in tasklist.tasks">
            <input ng-model="task.completed" type="checkbox">
            <span>{{task.description}}</span>
        </li>
      </ul>
    </div>

Mathew Berg · Accepted Answer · 2014-06-03 15:34:51Z

1

Multiple ways you can do this, I highly suggest against setting up a bunch of watches. I'm not sure how you're using this array but let's say you're using it in an ng-repeat like so:

<div data-ng-repeat="tasklist in tasklists">
    id: {{ tasklist.id }}<br>
    percentCompleted: {{ tasklist.tasks | filter: { completed: true } }}
    <div data-ng-repeat="task in tasklist.tasks">
        completed: {{ task.completed }}<br>
        description: {{ task.description }}
    </div>
</div>

jsfiddle: http://jsfiddle.net/WvSgC/

If you're trying to accomplish something else (you need to know what percent it is at to save) then the only method I can think of would be the current one you're using. You'll have to loop through. It might also be good to include the html code you use to modify/display this.

answered Jun 3, 2014 at 15:34

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

1 Comment

Robin Over a year ago

Thanks! I updated the question with the html. I can see now that watch is totally overkill for this, and just using the filter in an expression is the way to go. Like percentCompleted:{{ 100 * (tasklist.tasks | filter: { completed: true }).length / tasklist.tasks.length) | number:0 }}

Collectives™ on Stack Overflow

How to use Angular $watch with Equality on multiple objects in an array independently of one another?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related