移動列表

的順序我有如下代碼：移動列表

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

回答

相關問題