Angular sorted property of orderby object
I have a repeater ordered by a property of objects in the repeater.
<div id='#TodoList' >
<div ng-repeat="todo in todos | filter:left | orderBy:'priority'">
{{ todo.text }}
</div>
</div>
The area looks like this:
$scope.todos = [
{text: 'do 1', priority: 1},
{text: 'do 2', priority: 2},
]
Now I want to do sorting #TodoList
with jquery uijQuery("#TodoList").sortable();
How to prioritize each task update according to the new sortable task position?
+3
source to share
2 answers
Here's a working example. There are some things that can be improved ... but it works. http://jsfiddle.net/QfERt/30/
$("#TodoList").sortable({
update: function( event, ui ) {
var uiArray = $("#TodoList").sortable('toArray');
for (var i = 0; i < $scope.todos.length; i++) {
$scope.todos[i].priority = uiArray.indexOf($scope.todos[i].text) + 1;
}
$scope.$apply();
}
});
+4
source to share
jsFiddle: http://jsfiddle.net/AdrianMigraso/BTDdm/
your HTML
<div id='#TodoList' ng-controller="MyCtrl">
<ul id="sortable">
<li class="ui-state-default" ng-repeat="todo in todos | filter:left | orderBy:'priority'">
<span class="ui-icon ui-icon-arrowthick-2-n-s" ></span>
{{ todo.text }}
</li>
</ul>
</div>
you are AngularJS code
function MyCtrl($scope) {
$scope.todos = [
{text: 'do 1', priority: 1},
{text: 'do 2', priority: 2},
{text: 'do 5', priority: 5},
{text: 'do 3', priority: 3},
{text: 'do 4', priority: 4},
];
$scope.$watch('todos', function(newVal,oldVal) {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
}
+2
source to share