Question

我在ng-repeat中有一个很棒的项目列表，每个项目都有一个向上和向下按钮。我只想要向上按钮将列表项向上移动一个位置，向下按钮应将其向下移动一个位置。问题是我得到一个错误说＆＃34;无法读取属性＆＃39; NaN＆＃39;未定义的。＆＃34; 似乎＆＃34;位置＆＃34;在第二行未定义。我该怎么做才能解决这个问题？

继承我正在使用的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（）函数。您也可以将此功能用于其他拖放交换功能。

控制器中的

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

我希望对那里的人有所帮助。谢谢SO社区！

Answer 2

带有向上/向下按钮的简单列表非常简单，这里有一些粗略的通用代码。 ngRepeat指令将遵循数组中项目的顺序，因此在视图中移动它只是将它们移动到数组本身的问题。

视图：

<ul ng-controller="DemoCtrl as demo">
  <li ng-repeat="item in demo.list">
    {{item}}
    <button ng-click="demo.moveUp($index)">up</button>
    <button ng-click="demo.moveDown($index)">down</button>
  </li>
</ul>

控制器：

app.controller('DemoCtrl', function() {
  this.list = list = ['one', 'two', 'three', 'four'];

  this.moveUp = function(ix) {
    if(ix > -1 && ix < list.length - 1) {
      var tmp = list[ix+1];
      list[ix+1] = list[ix];
      list[ix] = tmp;
    }
  };

  this.moveDown = function(ix) {
    // similar...
  };
});

您的代码中有一些奇怪的项目（例如，您写的是$scope.list[position] = temp;时的意思$scope.list[position = temp];，我的示例并不完美，但它应该让您走上正确的道路这是完整的工作演示：http://jsbin.com/vatekodeje，请注意，在我的代码中，我使用“up”来表示增加索引而不是页面顶部。

同样在您的控制器中，您使用position作为索引（不清楚它应该是什么）并且在您的视图中使用{{1时，可能会引用一个名为$scope.list的数组}}。也许你的selectedWorkflow.Steps和$scope.list是一样的？

如何在按钮上移动对象内部按钮单击？

2 个答案: