Angular: Problem on move list itens
http://angularjs.org/
HTML
<script src="https://code.angularjs.org/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-controller="MyCtrl" class="container">
<h3>Try to move elements</h3>
<p class="form-group">
Move element <input class="form-control" ng-model="moveFrom" /> to element <input class="form-control" ng-model="moveTo" />
<button class="btn btn-default" ng-click="moveItem(moveFrom, moveTo)">Move</button>
</p>
<table class="table">
<tr ng-repeat="item in items" ng-class="{'warning': item == current_from, 'success': item == current_to}">
<td>{{ item.id }}</td>
<td><input ng-model="item.name" class="form-control" /></td>
<td>{{ item.age }}</td>
</tr>
</table>
</div>
CSS
.form-group .form-control {
display: inline-block !important;
max-width: 50px;
}
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {
function moveArray(arr, from, to, n) {
return arr.splice.apply(arr, [to, 0].concat(arr.splice(from, n ? +n : 1)));
}
$scope.working = 'Yes';
$scope.items = ['Jane', 'Laurie', 'Megan', 'Jack', 'Robert', 'Bob'].map(function(d, i) {
return {id: i, name: d, age: parseInt(Math.random()*100) };
});
$scope.moveItem = function(from, to) {
moveArray($scope.items, from, to);
};
var initial = $scope.items.length-1, $run;
$run = $interval(function($i) {
//var from = parseInt(Math.random() * $scope.items.length),
// to = parseInt(Math.random() * $scope.items.length);
var from = initial, to = (initial -= 1);
$scope.current_from = $scope.items[from];
$timeout(function() {
$scope.current_from = false;
$scope.moveItem(from, to);
$scope.current_to = $scope.items[to];
$timeout(function() {
$scope.current_to = false;
}, 800);
console.log($run, initial);
if (initial >= $scope.items.length || initial < 0)
$interval.cancel($run);
}, 800);
}, 2400);
}]);