Angularjs 更新重复项目索引_Angularjs

Angularjs 更新重复项目索引

angularjs

Angularjs 更新重复项目索引,angularjs,Angularjs,我有一个项目集合，我正在使用它在视图中显示。我还有两个按钮，一个用于向左移动项目，另一个用于向右移动项目查看 <div data-ng-repeat="item in items">  <a href="#"> <i ng-click="move($index, $index - 1)" class="fa fa-chevron-left">&

我有一个项目集合，我正在使用它在视图中显示。我还有两个按钮，一个用于向左移动项目，另一个用于向右移动项目

查看

<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>

阵列正在更新，但更改不会反映在UI中

如何使更改反映在UI中？它工作正常。只需在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>


{{item}}

它工作正常。只需在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>


{{item}}

它正在工作，请参见

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

index.html 请注意，您不能将第一项向后移动，将最后一项向前移动，因为第一项已经是列表中的第一项：）

别忘了在V形文字中添加一些文字（供屏幕阅读器使用！），最好在锚上设置
```
ng点击
```


href=“#”
不是必需的。您不想链接到#
（通常是您应用程序的登录页）->

更好的方法是：如果您想要一个指针光标，可以使用CSS来实现：cursor:pointer
，并省略href

它正在工作，请参见
（我删除了css类，因为示例中没有可用的css库）
index.html
请注意，您不能将第一项向后移动，将最后一项向前移动，因为第一项已经是列表中的第一项：）

别忘了在V形文字中添加一些文字（供屏幕阅读器使用！），最好在锚上设置ng点击

href=“#”
不是必需的。您不想链接到#
（通常是您应用程序的登录页）->

更好的方法是：如果您想要一个指针光标，可以使用CSS来实现：cursor:pointer
，并省略href

好吧，我创建了这个，它正在改变位置
我刚将MOVE方法移动到
{{item.name}
函数Ctrl（$scope）{
$scope.items=[{name:'aa'}，{name:'bb'}，{name:'cc'}，{name:'dd'}]
console.log（$scope.items）
$scope.move=函数（从索引到索引）{
console.log（$scope.items）
var元素=$scope.items[fromIndex]；
$scope.items.splice（来自索引1）；
$scope.items.拼接（toIndex，0，元素）；
};
}
好吧，我创建了这个，它正在改变位置
我刚将MOVE方法移动到
{{item.name}
函数Ctrl（$scope）{
$scope.items=[{name:'aa'}，{name:'bb'}，{name:'cc'}，{name:'dd'}]
console.log（$scope.items）
$scope.move=函数（从索引到索引）{
console.log（$scope.items）
var元素=$scope.items[fromIndex]；
$scope.items.splice（来自索引1）；
$scope.items.拼接（toIndex，0，元素）；
};
}
我认为它工作正常。我认为它工作正常。你说得对！原来是一个图书馆影响了这一变化。我正在使用和的角度版本，这是停止更改。谢谢你，你说得对！原来是一个图书馆影响了这一变化。我正在使用和的角度版本，这是停止更改。谢谢你，你说得对！原来是一个图书馆影响了这一变化。我正在使用和的角度版本，这是停止更改。谢谢你，你说得对！原来是一个图书馆影响了这一变化。我正在使用和的角度版本，这是停止更改。谢谢你，你说得对！原来是一个图书馆影响了这一变化。我正在使用和的角度版本，这是停止更改。谢谢你，你说得对！原来是一个图书馆影响了这一变化。我正在使用和的角度版本，这是停止更改。非常感谢。
<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>

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']);

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

};

}