Переместить заказ из списка

У меня есть последующий код:Переместить заказ из списка

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 «городах», заказ должен измениться. Например: когда я нажимаю «Берлин», в div «activeCity» должен быть выбран Берлин, а список должен двигаться и показывать: Лондон, Париж, Стокгольм, Цюрих, потому что после Берлина следующий город - Лондон, и поэтому на. Как я могу это сделать? Когда я нажимаю на последний в списке «Стокгольм», порядок должен начинаться с первого раза, это похоже на круг.

Спасибо.

источник

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

источник

2016-06-07 09:50:13

Привет, спасибо за Ваш ответ. Как я должен точно использовать orderBy в моем примере, не могли бы вы скопировать фрагмент и показать его мне? Благодарю. – MrBuggy

ответ

Смежные вопросы