Created
May 7, 2013 20:53
-
-
Save IsaiahPacheco/5536030 to your computer and use it in GitHub Desktop.
Sortable List in Angular with add and remove functions
expands upon sortable demo at http://jsfiddle.net/dj_straycat/Q5FWt/3/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
angular.module('myApp'). | |
controller('sortableListController', [ | |
'$scope', | |
function($scope) { | |
$scope.listOfObjects = ["Item 1","Item2", "Item3", "Item4"]; | |
var sortableEle; | |
$scope.sortableArray = $scope.listOfObjects; | |
//The newArray object changes contents of sortable array | |
$scope.changeListContents = function (newArray){ | |
$scope.sortableArray = newArray; | |
} | |
//add and remove specific list item by name (listItem represents a String) | |
//empty argument result in last list item being removed or empty item added to list | |
$scope.add = function( listItem ) { | |
$scope.sortableArray.push( listItem ); | |
} | |
$scope.remove = function( ListItem ) { | |
$scope.sortableArray.splice($scope.sortableArray.indexOf( listItem ), 1); | |
} | |
$scope.dragStart = function(e, ui) { | |
ui.item.data('start', ui.item.index()); | |
} | |
$scope.dragEnd = function(e, ui) { | |
var start = ui.item.data('start'), | |
end = ui.item.index(); | |
$scope.sortableArray.splice(end, 0, | |
$scope.sortableArray.splice(start, 1)[0]); | |
$scope.$apply(); | |
} | |
//<ul> id can replace #SortableList | |
sortableEle = $('#SortableList').sortable({ | |
start: $scope.dragStart, | |
update: $scope.dragEnd | |
}); | |
} | |
]) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment