移动列表顺序

Question

我有以下代码：

angular.module("myApp", []).controller("myController", function ($scope) {
  $scope.currentValue;
  $scope.list = [
          {
            "ID" : 1,
            "Name" : "Zurich"
          },
          
          {
            "ID" : 2,
            "Name" : "Berlin"
          },
    
          {
            "ID" : 3,
            "Name" : "London"
          },
          
          {
            "ID" : 4,
            "Name" : "Paris"
          },
    
          {
            "ID" : 5,
            "Name": "Stockholm"
          }
     ];
  
  
  $scope.setValue = function (item) {
    $scope.currentValue = item;
  }
  
  $scope.getValue = function () {
    if(!$scope.currentValue) {
      $scope.currentValue = $scope.list[0];
    }
    return $scope.currentValue;
  }
});

.wrapper {
  display: flex;
  padding: 5px;
}

.activeCity {
  height: 30px;
  color: darkblue;
  background-color: grey;
  padding: 5px;
}

.cities {
  display: flex;
}

.city {
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  padding: 5px;
}

.city:hover {
  font-weight: bold;
  cursor: pointer;
}

<html ng-app="myApp" ng-controller="myController">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  
  <body>
    <div class="wrapper" ng-init="getValue()">
      <div class="activeCity">
        {{currentValue.Name}}
      </div>
      
      <div class="cities" ng-repeat="item in list" ng-if="currentValue.ID != item.ID">
        <div class="city" ng-click="setValue(item)">
          {{item.Name}}
        </div>
      </div>
    </div>
  </body>
</html>

我列表中的顺序是：苏黎世、柏林、伦敦、巴黎和斯托克霍特。活动城市从 class "cities" 中挑选出来并显示在框 "activeCity" 中。这是默认值 "Zurich" 并且框中的列表以正确的顺序继续。现在，当我通过单击 div "cities" 中的一个来设置一个新的活动城市时，顺序应该会改变。例如：当我点击 "Berlin" 时，在 div "activeCity" 中应该选择 Berlin 并且列表的顺序应该移动并显示：London, Paris, Stockholm, Zurich - 因为之后柏林下一个城市是伦敦等等。我怎样才能做到这一点？当我单击列表中的最后一个 "Stockholm" 时，顺序应该再次从第一个开始，就像一个圆圈。

谢谢。

Answer 1

尝试this。您还可以创建自定义过滤器来更改 ng-repeat

中列表的顺序

Answer 2

您需要进行一些智能数组操作才能循环移动零件。这应该是诀窍：

var index = $scope.list.indexOf(item);
var before = $scope.list.slice(0, index + 1);
var after = $scope.list.slice(index + 1);
$scope.list = [].concat(after, before);

... 或者在 ES6 中会更短一些：

$scope.list = [...after, ...before];

查看下面的演示。

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.currentValue;
  $scope.list = [{
      "ID": 1,
      "Name": "Zurich"
    },

    {
      "ID": 2,
      "Name": "Berlin"
    },

    {
      "ID": 3,
      "Name": "London"
    },

    {
      "ID": 4,
      "Name": "Paris"
    },

    {
      "ID": 5,
      "Name": "Stockholm"
    }
  ];


  $scope.setValue = function(item) {
    $scope.currentValue = item;
    var index = $scope.list.indexOf(item);
    var before = $scope.list.slice(0, index + 1);
    var after = $scope.list.slice(index + 1);
    $scope.list = [].concat(after, before); 
    // ES6: $scope.list = [...after, ...before];
    // console.log($scope.list.map(item => item.Name))
  }

  $scope.getValue = function() {
    if (!$scope.currentValue) {
      $scope.currentValue = $scope.list[0];
    }
    return $scope.currentValue;
  }
});

.wrapper {
  display: flex;
  padding: 5px;
}
.activeCity {
  height: 30px;
  color: darkblue;
  background-color: grey;
  padding: 5px;
}
.cities {
  display: flex;
}
.city {
  color: white;
  background-color: darkblue;
  border: 1px solid white;
  padding: 5px;
}
.city:hover {
  font-weight: bold;
  cursor: pointer;
}

<html ng-app="myApp" ng-controller="myController">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <div class="wrapper" ng-init="getValue()">
    <div class="activeCity">
      {{currentValue.Name}}
    </div>
    <div class="cities" ng-repeat="item in list" ng-if="currentValue.ID != item.ID">
      <div class="city" ng-click="setValue(item)">
        {{item.Name}}
      </div>
    </div>
  </div>
</body>

</html>

移动列表顺序

Move order of list

list

move

angularjs