Question

我有一组项目，我使用ng-repeat在我的视图中显示。我还有两个按钮，一个用于将项目向左移动，另一个用于将项目向右移动。

查看

<div  data-ng-repeat="item in items">

    <!--Move Item Index to the Left-->
    <a href="#">
        <i ng-click="move($index, $index - 1)" class="fa fa-chevron-left"></i>
    </a>
    <!--Move Item Index to the Right-->
    <a href="#" >
        <i ng-click="move($index, $index + 1)" class="fa fa-chevron-right"></i>
    </a>

    <h1>{{item.name}}</h1>

</div>

控制器

$scope.move = function(fromIndex, toIndex) {
    var element = $scope.items[fromIndex];
     $scope.items.splice(fromIndex, 1);
     $scope.items.splice(toIndex, 0, element);
};

数组正在更新，但更改未反映在UI中。

如何让更改反映在用户界面中？

Answer 1

工作正常。只需在i标签中添加一些文字，然后点击它即可。

<div  data-ng-repeat="item in items">

        <!--Move Item Index to the Left-->
        <a href="#">
            <i ng-click="move($index, $index - 1)" class="fa fa-chevron-left">Left</i>
        </a>
        <!--Move Item Index to the Right-->
        <a href="#" >
            <i ng-click="move($index, $index + 1)" class="fa fa-chevron-right">Right</i>
        </a>

        <h1>{{item}}</h1>

</div>

Answer 2

这只是工作，请参阅JSFiddle

（我删除了css类，因为示例中没有可用的css库）

的index.html

<div id="app" ng-controller="MainCtrl">
  <div data-ng-repeat="item in items">

    {{item}}

    <!--Move Item Index to the Left-->
    <a href="#" ng-click="move($index, $index - 1)">&lt;</a>
    <!--Move Item Index to the Right-->
    <a href="#" ng-click="move($index, $index + 1)">&gt;</a>

  </div>
</div>

app.js

angular.module('myApp', [])
  .controller('MainCtrl', function ($scope) {
    $scope.items = ['a', 'b', 'c'];

    $scope.move = function (fromIndex, toIndex) {
      var element = $scope.items[fromIndex];
      $scope.items.splice(fromIndex, 1);
      $scope.items.splice(toIndex, 0, element);
    };
  });

angular.bootstrap(document.querySelector('#app'), ['myApp']);

请注意，您无法将第一个项目向前移动，也不能向前移动最后一个项目，因为第一个项目已经是列表的第一个项目：）。

不要忘记将一些文字（对于屏幕阅读器！）添加到V形符号中，最好在锚点上设置ng-click。
href="#"没有必要。您不想链接到#（通常是您应用的目标网页） - ＆gt; <a href ng-click="...">
更好的是：如果你想要一个指针光标，你可以使用CSS：cursor: pointer并省略href。

Answer 3

好吧，我创建了这个example on Plnkr，它正在改变位置

我刚将MOVE方法移至<a>标记。

<!doctype html>
<html ng-app>
  <head>
    <script src=".../angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>

<div ng-controller="Ctrl">

  <div  data-ng-repeat="item in items">

    <!--Move Item Index to the Left-->
    <a href="#" ng-click="move($index, $index - 1)">
        <i  class="fa fa-chevron-left"></i>
        Left
    </a>
    <!--Move Item Index to the Right-->
    <a href="#" ng-click="move($index, $index + 1)" >
        <i  class="fa fa-chevron-right"></i>
        Right
    </a>

    <h1>{{item.name}}</h1>

</div>


</div>



  </body>
</html>


function Ctrl($scope) {

 $scope.items = [{name:'aa'}, {name:'bb'}, {name:'cc'},{name:'dd'}]
  console.log($scope.items)

 $scope.move = function(fromIndex, toIndex) {
    console.log($scope.items)
    var element = $scope.items[fromIndex];
     $scope.items.splice(fromIndex, 1);
     $scope.items.splice(toIndex, 0, element);

};

}

更新重复项目索引

3 个答案:

的index.html

app.js