gpt4 book ai didi

javascript - Ng-repeat 不更新数组更改

转载 作者:搜寻专家 更新时间:2023-11-01 04:35:42 24 4
gpt4 key购买 nike

我已经研究了这个问题好几个小时,并阅读了许多其他看起来完全相同的问题,并且我尝试了他们的每一个解决方案,但似乎都没有用。

我有一个对象数组 ( instructionObj.instructions ),这些对象用 ng-repeat 重复他们的模板是一个指令。

<div instruction-directive ng-repeat="i in instructionsObj.instructions"> </div>

然后我允许使用 Jquery UI sortable 对项目进行排序。

var first, second;
$( ".sort" ).sortable({
axis: "y",
start: function( event, ui ) {
first = ui.item.index();
},
stop: function( event, ui ) {
second = ui.item.index();
console.log(first + " " + second);
rearrange(first, second);
$scope.$apply();
}
});

然后我访问被移动对象的开始和结束索引并相应地重新排列数组:

function rearrange(f, s){
$timeout(function () {
$scope.instructionsObj.instructions.splice(s, 0,
$scope.instructionsObj.instructions.splice(f, 1)[0]);
$scope.$apply();
});
}

所有这些在大多数情况下都非常有效。我发现失败的一个场景是重新排列对象(一列是屏幕上显示的所有对象的当前位置):

一个 |乙 | c | d |一个

b | c | d | c |

c | d |乙 |乙 |

d |一个 |一个 |一个 |

最后一步应该是a,d,c,b。但是它变成了 a, b, d, c。

wrong configuration

但是,当我返回到之前的 View 并返回显示正确的配置时,一切都很好。如您所见,我已经尝试过 $timeout$apply()和许多其他东西,但似乎都不起作用。

我知道这是 DOM 更新问题,因为我可以记录数组并查看它与 DOM 显示的内容(不正确)不同(正确)。任何帮助将不胜感激。

更新:

我什至在使用 <pre ng-bind="instructionsObj.instructions|json</pre>显示数组的确切布局,它总是正确的。我的心被震撼了。

最佳答案

幸运的是我找到了解决方案,尽管我不明白为什么会出现这个问题。

在这个 JS 中:

sortableEle = $('.sort').sortable({
start: $scope.dragStart,
update: $scope.dragEnd
});

$scope.dragStart = function(e, ui) {
ui.item.data('start', ui.item.index());
}
$scope.dragEnd = function(e, ui) {
var start = ui.item.data('start'),
end = ui.item.index();

$scope.instructionsObj.instructions.splice(end, 0,
$scope.instructionsObj.instructions.splice(start, 1)[0]);
currentRecipe.setInstructions($scope.instructionsObj.instructions);
$scope.$apply();
sortableEle.refresh();
}

我需要在更改数组后调用 $scope.$apply() 作为 sortableEle.refresh()

同样,我不明白为什么它会在 10% 的时间里搞砸,但这已经解决了。

仅供引用:我稍微更改了 sortable 函数,但它做的事情和以前完全一样。

关于javascript - Ng-repeat 不更新数组更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36806947/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com