javascript - ng-repeat 中的跟踪不是跟踪

Question

我正在尝试构建一个列表，该列表将通过单击向上和向下按钮进行更新。另外，我正在使用 AngularJS 来完成此操作。

这是我的 HTML:

<div ng-repeat="element in playlistElements | orderBy: element.position track by element.position"
     class="track {{ element.type }} track-{{ element.position }}">
    <div class="full-line bold">{{ element.firstLine }}</div>
    <div class="full-line">{{ element.lastLine }}</div>
    <div class="track-controls">
        <p>
            <i class="fa fa-arrow-up" ng-if="!$first" ng-click="rebuildPlaylist(element, 'up')"></i>
            <i class="fa fa-arrow-down" ng-if="!$last" ng-click="rebuildPlaylist(element, 'down')"></i>
            <i class="fa fa-times" ng-click="rebuildPlaylist(element, 'remove')"></i>
        </p>
    </div>
</div>

这是我的 Controller :

$scope.rebuildPlaylist = function(track, action) {
    var media = {
        id: track.id,
        position: track.position
    };
    console.log(track.position);
    if (action == 'up') {
        $scope.playlistElements[media.position].position = media.position - 1;
        $scope.playlistElements[media.position - 1].position = media.position;
    }
    console.log($scope.playlistElements);
};

当我单击向上箭头“图片”时，我的 playlistElements 的 position 值会使用正确的值和我的 element 进行 self 更新> DOM 中的对象似乎是干净的。

但似乎并没有使用 position 的新值“重新加载”DOM。

不确定我是否清楚，所以请向我询问精确度。我已经很长时间没有使用 Angular 了，所以，也许我做错了事情。

感谢您的帮助:)。

Answer 1

我设法用你的代码示例制作了一个工作 fiddle 。您可以在这里查看:JSFIDDLE

<i class="fa fa-arrow-up" ng-if="!$first" ng-click="rebuildPlaylist($index, 'up')"></i>
    <i class="fa fa-arrow-down" ng-if="!$last" ng-click="rebuildPlaylist($index, 'down')"></i>

还有:

$scope.rebuildPlaylist = function(index, action) {
if (action == 'up' && index > 0) {
  var tempoStorage = $scope.playlistElements[index];
  $scope.playlistElements[index] = $scope.playlistElements[index - 1];
  $scope.playlistElements[index - 1] = tempoStorage;
}
if (action == 'down' &&  index < $scope.playlistElements.length) {
  var tempoStorage = $scope.playlistElements[index];
  $scope.playlistElements[index] = $scope.playlistElements[index + 1];
  $scope.playlistElements[index + 1] = tempoStorage;
}

基本上有两件事:

1) Angular 中的“track by”不会影响 ng-repeat 内元素的顺序。它通过什么跟踪为 ng-repeat 提供一些需要考虑的内容来跟踪每个元素。例如，如果您的重复元素中多次出现相同的元素，则 Angular 将丢失自身并且无法显示它。添加“跟踪依据”可以让您正确显示，即使有重复项也是如此。

2)我所做的基本上是在单击时将 $index 提供给您的方法调用，并交换数组中的两个元素。由于 ng-repeat 基于您的数组，因此反转其中的顺序也会使显示交换。哦，顺便说一下，ng-repeat 中的 $index 表示当前元素的索引。

祝你编码愉快!