angularjs - 如何在单击按钮时在 ng-Repeat 内移动对象？

Question

我在 ng-repeat 中有一个漂亮的项目列表，每个项目都有一个向上和向下按钮。我只希望向上按钮将列表项向上移动一位，向下按钮应将其向下移动一位。问题是我收到一条错误消息“无法读取未定义的属性‘NaN’”。第二行似乎“位置”未定义。我可以做什么来解决这个问题？

这是我正在使用的 javascript(感谢 Rishul Matta):

$scope.moveUp = function(ind, position) {
       $scope.temp = $scope.list[position - 1];
       $scope.list[position - 1] = $scope.list[position];
       $scope.list[position = temp];
  };

这是我的 HTML:

<ul>
  <li class="steps" ng-repeat="step in selectedWorkflow.Steps track by $index" ng-class="{'words' : step.Id != selectedStep.Id, 'selectedWords' : step.Id == selectedStep.Id}" ng-model="selectedWorkflow.Step" ng-click="selectStep(step, $index); toggleShow('showSubStep'); toggleShow('showEditBtn')">
      {{step.Name}}
      <input class="orderUpBtn" type="button" ng-click="moveUp($index, step)" style="z-index:50" value="U" />
      <input class="orderDownBtn" type="button" style="z-index:50" value="D" /> 
  </li>
</ul>

谢谢!

Answer 1

感谢您发布此问题 (+1) 和 jtrussell 的答案 (+1)。我想与其他人分享我认为更可重用/模块化的答案(受到 odetocode.com post 的启发)。

对于 HTML，jtrussell 的代码是完美的，因为他修复/简化了一切。为了获得更好的用户体验，我刚刚为第一个/最后一个元素添加了 ng-disabled。

HTML:

<ul ng-controller="DemoCtrl as demo">
    <li ng-repeat="item in demo.list">
        {{item}}
        <button class="move-up"
            ng-click="listItemUp($index)"
            ng-disabled="$first">
                Move Up
        </button>
        <button class="move-down"
            ng-click="listItemDown($index)"
            ng-disabled="$last">
            Move Down
    </button>
    </li>
</ul>

对于 JS，请注意 moveItem() 函数，我认为它更具可重用性。您也可以将此功能用于其他拖放交换功能。

Controller 内的 JS(在 Angular 1.3.15 上测试):

// Move list items up or down or swap
$scope.moveItem = function (origin, destination) {
    var temp = $scope.list[destination];
    $scope.list[destination] = $scope.list[origin];
    $scope.list[origin] = temp;
};

// Move list item Up
$scope.listItemUp = function (itemIndex) {
    $scope.moveItem(itemIndex, itemIndex - 1);
};

// Move list item Down
$scope.listItemDown = function (itemIndex) {
    $scope.moveItem(itemIndex, itemIndex + 1);
};

我希望这对那里的人有帮助。感谢社区!