JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='myApp' ng-controller="ArrayController">
<select id="select" size="20" ng-model="persons" ng-options="item as item.name for item in peoples track by item.id" multiple></select>
<br/>
<button ng-click="moveUp()">Up</button>
<br/>
<button ng-click="moveDown()">Down</button>
<br/>
</div>
JavaScript
var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
$scope.peoples = [{
name: 'Jacob',
id: 1
}, {
name: 'Sunny',
id: 2
}, {
name: 'Lenu',
id: 3
}, {
name: 'Mathew',
id: 4
}, {
name: 'Ferix',
id: 5
}, {
name: 'Kitex',
id: 6
},{
name: 'Jacob',
id: 7
}, {
name: 'Sunny',
id: 8
}, {
name: 'Lenu',
id: 9
}, {
name: 'Mathew',
id: 10
}, {
name: 'Ferix',
id: 11
}, {
name: 'Kitex',
id: 12
}];
$scope.moveUp = function () {
var prevIdx = -1;
var person = $scope.persons.concat();
console.log($scope.persons);
for(var i = 0; i < $scope.persons.length; i++) {
var idx = $scope.peoples.indexOf($scope.persons[i])
console.log(idx);
if (idx-1 === prevIdx) {
prevIdx = idx
} else if (idx > 0) {
var itemToMove = $scope.peoples.splice(idx, 1)
console.log(itemToMove[0])
$scope.peoples.splice(idx-1, 0, itemToMove[0]);
}
}
};
$scope.moveDown = function () {
var prevIdx = $scope.peoples.length;
console.log($scope.persons)
var revPerson = $scope.persons.concat();
revPerson.reverse();
for(var i = 0; i < revPerson.length; i++) {
var idx = $scope.peoples.indexOf(revPerson[i])
console.log('idx:' + idx, 'prevIdx:' + prevIdx);
if (idx+1 === prevIdx) {
prevIdx = idx
} else if (idx < $scope.peoples.length-1) {
var itemToMove = $scope.peoples.splice(idx, 1)
console.log(itemToMove[0])
$scope.peoples.splice(idx+1, 0, itemToMove[0]);
...