Question

我遵守了代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我的清单中的订单是：苏黎世，柏林，伦敦，巴黎和Stockholt。活跃的城市被挑选出来的城市＆＃34;城市＆＃34;并在框中显示＆＃34; activeCity＆＃34;。这是默认情况下＆＃34;苏黎世＆＃34;并且框中的列表以正确的顺序继续。现在，当我通过点击div＆＃34; cities＆＃34;中的一个来设置一个新的活跃城市时，订单应该改变。例如：当我点击＆＃34;柏林＆＃34;，在div＆＃34; activeCity＆＃34;应该选择柏林和列表的顺序应该移动和显示：伦敦，巴黎，斯德哥尔摩，苏黎世 - 因为柏林之后的下一个城市是伦敦等等。我怎样才能做到这一点？当我点击列表中的最后一个＆＃34;斯德哥尔摩＆＃34;时，订单应该从第一个开始，它就像是一个圆圈。

感谢。

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

查看下面的演示。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

移动列表的顺序

2 个答案: