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>

这是我的控制器：

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

当我点击向上箭头＆＃34;图片＆＃34;时，我的position的{{1}}值正在使用良好的值进行更新，而我的playlistElements对象似乎在DOM中干净。

但似乎不是＆＃34;重新加载＆＃34; DOM的值为element。

不确定我是否清楚，所以请问我精确度。我很长一段时间没有使用Angular，也许我做错了。

感谢您的帮助:)。

Answer 1

我设法让你的代码示例中的工作小提琴。您可以在此处查看：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）＆＃34;追踪＆＃34;在角度不影响ng-repeat内元素的顺序。什么跟踪它给ng-repeat一些东西考虑到跟踪每个元素。例如，如果您在重复元素中多次使用相同的元素，则angular将自行丢失并且无法显示它。添加＆＃34;跟踪＆＃34;允许您进行正确的显示，即使是重复显示。

2）我所做的基本上是在你的方法调用上给你的$ index，并交换你的数组中的两个元素。因为ng-repeat是基于你的数组，反转它内部的顺序将使显示交换。哦，顺便说一下，ng-repeat中的$ index表示当前元素的索引。

快乐的编码！

在ng-repeat跟踪跟踪

1 个答案: