移动列表

的顺序我有如下代码：移动列表

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>

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

感谢。

来源

2016-06-07 MrBuggy

您需要执行一些智能阵列操作才能周期性移动部件。这应该是招：

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>

来源

2016-06-07 10:15:40 dfsq

你好，这正是我搜索的解决方案 - 谢谢！ – MrBuggy

尝试this。您也可以创建自定义过滤器来更改ng-list中的列表顺序

来源

2016-06-07 09:50:13

您好，感谢您的回答。在我的例子中，我应该如何精确地使用orderBy，你能否复制这个代码片段并显示给我？谢谢。 – MrBuggy

回答

相关问题