Question

所以我的控制器在我的范围内有多个任务列表模型。这样的事情。

    $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

你可以通过多种方式做到这一点，我强烈建议不要设置一堆手表。我不确定你是如何使用这个阵列的，但是让我们说你在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代码也可能不错。

如何将Angular $ watch与Equality一起使用，使得数组中的多个对象彼此独立？

1 个答案: