如何在数组中独立的多个对象上使用Angular的$watch with equal

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

本文关键字：Angular equal with watch 数组 独立 对象      更新时间：2023-09-26

所以我有一个控制器与多个任务列表模型在我的范围。像这样。

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

有多种方法可以做到这一点，我强烈建议不要设置一堆手表。我不知道你是怎么使用这个数组的假设你在一个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代码。

相关文章：