- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我已经研究了这个问题好几个小时,并阅读了许多其他看起来完全相同的问题,并且我尝试了他们的每一个解决方案,但似乎都没有用。
我有一个对象数组 ( 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。
但是,当我返回到之前的 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/
我的代码 "> 我想做的是 如果外层 ng-repeat 中的 n 为 0,则 div.book_container 将如下所示: 否则,di
嗨,我有一个用于 ng-repeat-start 和 end 的简单用例,并且工作正常,当我想添加内部 ng-repeat 时出现问题。 这是我的代码 {{e}} {{obj.descr
我正在查看一长串 DNA 核苷酸,并正在寻找以起始代码“AAA”开头并以终止代码“CCC”结尾的序列。由于核苷酸以三联体形式出现,因此我找到的每个序列开始和结束之间的核苷酸数必须是三的倍数。 例如,'
我有这个: .... #{item.product.codigoProduto} #{m.description} ... listRequ
我从服务请求中返回了以下 json 数据: { "entries": [{ "id": 2081, "name": "BM", "niceNam
在 Aurelia 中嵌套 repeat.for 时,内部 repeat.for 无权访问其父 repeat.for 中使用的变量>. 示例 ${x} - ${y} 在上面的示
我有一个带有类别的对象,在这个对象内部有一个名为 items 的对象,其中包含带有 items 的对象。 现在我想重复显示这样的项目: {{cat
我有... html, body { background-size: contain; background-repeat: no-repeat; } 作为我的 CS
我的问题如下:旋转时,由重复图案组成的背景发生变化,因此图案被拉伸(stretch)而不是重复。可能有什么问题? 我有这个由重复图案组成的背景: 最佳答案 您必须手动设置重复模式: parent =
关于下面的元素 如何编辑 element.style?我想要 background-repeat : no-repeat; 不确定从哪里设置它。 element { display: blo
我有一个 Observable,我想定期重复,但仅限于以下条件: apiInterface.getData() // returns Observable ... // processing is h
我无法停止 td 元素中的图像重复。它看起来很难看。我该如何解决这个问题?我也添加了 background-repeat: no-repeat 代码,但它仍然无法正常工作。请不要建议从我的 td 宽度
我想知道以下哪个示例的效果更好。如果性能相同,哪个读起来更好? 示例 1(重复选择器) .helpfulCommenter, .questionTroll { 颜色:#f00; } .question
我正在尝试创建 tooltip对于通过 ng-repeat. 创建的表的第一行 但是工具提示没有呈现。 HTML $(document).ready(function () {
我正在开发一个页面,我需要在其中显示一些框(使用 ng-repeat ),其中包含 channel 信息以及显示位置(城市)。 我面临的问题是当我重复第二个 ng-repeat : 这应该获得第一个
我在另一个 ng-repeat 中有 ng-repeat,并且两者都有分页数据。 主要的工作正常,但 ng-repeat 内的分页数据并不总是工作。它会抛出控制台错误。 错误:[$interpolat
所以我有这个小问题。我对所有项目使用 ng-repeat,我们称它们为国家,每个项目本身都有一个 ng-repeat 作为城市等子类别。我用国家/地区填充下拉菜单。 所以我有这样的国家列表: 美国 德
我有一条从 Angular $resource promise 返回的记录,如下所示。 记录是一个数组,每个记录数组中都有另一个变量数组。我尝试在我的 View 中显示如下。 div(ng-repe
我需要使用 ng-repeat 来生成多个元素,但这些元素不能分别包装在 div 内(这是用于框布局的目的,其中框布局仅适用于直接子元素)。例如,我需要这个结果: Head 1 Body 1
我已经看到(很多)许多教程和装饰器的片段 w/和 w/o 参数,包括我认为是规范答案的两个:Decorators with arguments , python decorator arguments
我是一名优秀的程序员,十分优秀!