Angular reorderable list

Example on how to implement a reorderable list of items with AngularJS

by Subramanian Gomathinathan

HTML

<div ng-app="demo">
  <div ng-controller="DemoController as dc">
    <ul>
      <li ng-repeat="item in dc.items | orderBy: 'order'">
        <span ng-bind="item.name"></span>
        <input type="button" value="Up" ng-click="dc.reorder.decrementOrder(item)" />
        <input type="number" ng-model="item.order" ng-change="dc.reorder.moveTo(item)" ng-model-options="{ updateOn: 'blur' }" />
        <input type="button" value="Down" ng-click="dc.reorder.incrementOrder(item)" />
      </li>
    </ul>
  </div>
</div>

SCSS

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  li {
    display: block;
    margin: 5px 0;
    
    span{
      display: inline-block;
      width: 150px;
    }
    input[type=number]{
      width: 35px;
      text-align: center;
    }
  }
}

JavaScript

angular.module('demo', [])

.controller('DemoController', function(){
	var vm = this;

	vm.items = [
        { name: 'Devin', order: 1 },  { name: 'Subbu', order: 8 },
        { name: 'Joe',  order: 3 },   { name: 'Ravi', order: 4 },
        { name: 'Tony', order: 5 },   { name: 'Jory', order: 6 },
        { name: 'Linda', order: 9 },  { name: 'Allen', order: 2 },
        { name: 'Mark', order: 7 },   { name: 'Tom', order: 10 }
  ];
  
  var itemsCopy = angular.copy(vm.items);

	vm.reorder = new function() {
  	this.incrementOrder = function(item){    
    	item.order = item.order + 1;   
      
      for(var i = 0; i < vm.items.length; i++){
        if(vm.items[i].order == item.order && item.name != vm.items[i].name) {
        	vm.items[i].order = vm.items[i].order - 1;
        }
      }
      
      itemsCopy = angular.copy(vm.items); 
    };
    
    this.decrementOrder = function(item){
      item.order = item.order - 1;
      
      for(var i = 0; i < vm.items.length; i++){
        if(vm.items[i].order == item.order && item.name != vm.items[i].name) {
        	vm.items[i].order = vm.items[i].order + 1;
          break;
        }
      }
      
      itemsCopy = angular.copy(vm.items); 
    };
    
    this.moveTo = function(item){
      if(item.order > vm.items.length){
      	item.order = vm.items.length;
      }
      
       if (item.Order <= 0 ) {
         item.Order = 1;                    
       }
      
      var originalOrder;
      
      for(var i = 0; i < itemsCopy.length; i++)
      {
      	if(itemsCopy[i].name == item.name){
          originalOrder = itemsCopy[i].order;
          break;
        }
      }
      
      for(var i = 0; i < vm.items.length; i++)
      {
      	if(vm.items[i].name != item.name){
        	if(item.order > originalOrder && vm.items[i].order >= originalOrder && vm.items[i].order <= item.order){
        	  vm.items[i].order = vm.items[i].order - 1;
          }
          else if(item.order < originalOrder &&...