Ng-repeat不会随阵列更改而更新

时间:2016-04-23 05:17:02

标签: javascript jquery arrays angularjs

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

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

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

然后我允许使用Jquery UI排序项目。

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();
    });
}

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

a | b | c | d |一个

b | c | d | c | B'/ P>

c | d | b | b | d

d | a | a | a | ç

最后一步应该是a,d,c,b。但它改为a,b,d,c。

wrong configuration

然而,当我回到上一个视图并返回时,显示正确的配置,一切都很好。正如您所看到的,我尝试了$timeout$apply()以及许多其他内容,但似乎都没有。

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

更新

我甚至使用<pre ng-bind="instructionsObj.instructions|json</pre>来显示数组的确切布局,它始终是正确的。我的思绪很震撼。

1 个答案:

答案 0 :(得分:1)

幸运的是,我找到了一个解决方案,即使我不明白为什么问题仍在发生。

在这个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%的时间内搞乱,但是修复了它。

仅供参考:我稍微更改了可排序功能,但它的功能与以前完全相同。