Angularjs 对象在数组中更改,但在页面上保持不变
我有一张由Angularjs 对象在数组中更改,但在页面上保持不变,angularjs,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Scope,Angularjs Ng Repeat,我有一张由ng repeat制作的表格。下面是无法刷新的部分 <tbody class="defTbody" ng-repeat="activity in activityList track by activity.ActivityID"> <tr class="{{activity.DetailExpanded == true ? 'shown' : ''}}"> <td> <a ng-if="!
ng repeat
制作的表格。下面是无法刷新的部分
<tbody class="defTbody" ng-repeat="activity in activityList track by activity.ActivityID">
<tr class="{{activity.DetailExpanded == true ? 'shown' : ''}}">
<td>
<a ng-if="!activity.DetailExpanded" ng-click="activity.DetailExpanded = true"><i class="fa fa-fw fa-plus-circle txt-color-green fa-lg"></i></a>
<a ng-if="activity.DetailExpanded" ng-click="activity.DetailExpanded = false"><i class="fa fa-fw fa-minus-circle txt-color-red fa-lg"></i></a>
</td>
<td style="font-size:smaller">
<a ng-click="getActivityStatements(activity.ActivityID)" style="cursor: pointer;">
{{activity.PlanDateTime}} / {{activity.ActivityType_DisplayName}}
<br />
<small class="text-muted"><i>{{activity.ActivityID}}<i></i></i></small>
</a>
</td>
<td style="font-size:smaller">
{{activity.ParentActivityDisplayName}}
<br />
<small class="text-muted"><i>{{activity.ParentActivityID}}<i></i></i></small>
</td>
<td>{{activity.Customer_DisplayName}}</td>
<td>{{activity.ActivityStatus_DisplayName}}</td>
<td>
{{activity.StatusReason}}
<br />
{{activity.StatusReasonNote}}
</td>
</tr>
</tbody>
我在调试中确认该项得到了很好的“更新”,但在屏幕上它保持不变
我认为这是一个$scope.$apply()可以解决的问题,但是添加它(如上面的代码段所示)导致了这个问题
Error: error:inprog
Action Already In Progress
$digest already in progress
我还能做什么
PS:这是用Angular JS 1.0编写的,在调用$apply之前,请检查摘要周期是否繁忙
if(!$scope.$$phase) {
//$digest or $apply
}
---------编辑------
任何$scope都添加了一个新的强大方法:$evalAsync。基本上,如果当前摘要周期正在发生回调,它将在当前摘要周期内执行回调,否则新的摘要周期将开始执行回调。
试试这个:
在这些情况下,以及所有其他情况下,你有一个$作用域。$$阶段,请确保使用
$scope.$evalAsync(回调)
在回调中执行所有相关更改。选中此项,您正在筛选activityList并更新筛选后的数组(结果)第一个元素,而不是activityList数组
var renewedAct = response.Detail[0];
for (let index = 0; index < $scope.activityList.length; index++) {
const activity = $scope.activityList[index];
if (activity.ActivityID == activityID) {
$scope.activityList[index] = renewedAct;
break;
}
}
var renewedAct=response.Detail[0];
for(让index=0;index<$scope.activityList.length;index++){
const activity=$scope.activityList[index];
如果(activity.ActivityID==ActivityID){
$scope.activityList[索引]=续订的Act;
打破
}
}
您可以使用带有单行线的拼接执行此操作,即使无需再次循环
这是密码
var activity = $scope.activityList.filter(activity => activity.ActivityID == activityID)[0];
var index = $scope.activityList.indexOf(activity);
var renewedAct = response.Detail[0];
activity = renewedAct;
$scope.activityList.splice(index, 1, activity)
注意:上一行在该位置删除该元素并添加新元素。您在哪里更新activityList?我不是更新整个列表,只是更新列表中的一个项目。为什么需要$scope.$apply
?您的$scope
函数和$http
是摘要周期的一部分。页面仍然保持不变,需要刷新以查看更新的数据。我尝试了,但效果也很好,很糟糕,我已经选择了答案。可以,我添加了它,因为它是一个优化的解决方案。
var activity = $scope.activityList.filter(activity => activity.ActivityID == activityID)[0];
var index = $scope.activityList.indexOf(activity);
var renewedAct = response.Detail[0];
activity = renewedAct;
$scope.activityList.splice(index, 1, activity)