Javascript 如何在一个数组中的多个对象上使用相等的Angular$watch,使其相互独立?
所以我有一个控制器,在我的范围内有多个任务列表模型。像这样的Javascript 如何在一个数组中的多个对象上使用相等的Angular$watch,使其相互独立?,javascript,angularjs,Javascript,Angularjs,所以我有一个控制器,在我的范围内有多个任务列表模型。像这样的 $scope.taskslists = [ { id : 1, percentCompleted : 0, tasks : [ { completed : false, description : 'Lorem ipsum do
$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>
-
{{task.description}
有多种方法可以做到这一点,我强烈建议不要设置一堆手表。我不确定您是如何使用此数组的,但假设您在ng重复中使用它,如下所示:
<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>
id:{{tasklist.id}}
完成百分比:{{tasklist.tasks |筛选器:{completed:true}}
已完成:{{task.completed}}
描述:{{task.description}}
jsfiddle:
如果你试图完成其他事情(你需要知道它的保存百分比),那么我能想到的唯一方法就是你当前使用的方法。你得绕过去。最好包含用于修改/显示此内容的html代码。谢谢!我用html更新了这个问题。我现在可以看出watch在这方面做得太过火了,在表达式中使用过滤器是一种好方法。完成百分比:{{100*(tasklist.tasks | filter:{completed:true}).length/tasklist.tasks.length)| number:0}