javascript - 如何在数组中的多个对象上相互独立地使用 Angular $watch 和 Equality？

Question

所以我有一个 Controller ，在我的范围内有多个任务列表模型。像这样的东西。

    $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'
                },
            ]
        },
    ];

对于每个任务列表，当任务的已完成值更改为 true 或 false 时，我想更新相应任务列表模型中的percentCompleted 属性。我正在考虑使用 $watch 来完成此任务。

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

虽然它运行良好，但它总是返回整个集合，但我只对该集合中更新的任务列表感兴趣。我知道这是一项昂贵的任务，所以我想知道是否有一种方法可以对我正在监听和更新的值更有选择性。我对 Angular 还很陌生，所以我不确定这是否是一个错误的方法。

我唯一的目标是显示一个进度条，其宽度来自已完成任务的百分比。

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

Answer 1

您可以通过多种方式来做到这一点，我强烈建议不要设置一堆 watch 。我不确定你如何使用这个数组，但假设你在 ng-repeat 中使用它，如下所示:

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

如果您正在尝试完成其他任务(您需要知道节省的百分比)，那么我能想到的唯一方法就是您当前正在使用的方法。你必须循环遍历。包含用于修改/显示此内容的 html 代码也可能会很好。