TypeError: Cannot read property '0' of undefined -- ng-Sortable ( AngularJs )

3k Views Asked by At

I am using ng-sortable for the feature of reorder the list elements. The list over which i am intending to apply ng-sortable is :

List B : [object Object],[object Object],[object Object]

Example

Following is my code:

HTML --

 <div data-as-sortable-item-handle>
     <!-- <div class="list-group-item"> -->
        {{$index + 1}}{{user.Name}} <input ng-click="ctrl.selectB(user.id)" name="ctrl.selectedB[]" value="{{user.id}}" ng-checked="ctrl.selectedB.indexOf(user.id) > -1"
                                type="checkbox" class="pull-right">
<!-- </div> -->
</div>

</li>
</ul>

Controller --

$scope.dragControlListeners = {
                        accept: function (sourceItemHandleScope, destSortableScope) 
                        {return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;},
                        itemMoved: function (event) {
                            //Do what you want },
                        },
                        orderChanged: function(event) {
                            //Do what you want},
                        }
                                        };

But i am getting the error:

TypeError: Cannot read property '0' of undefined

TypeError: Cannot read property '1' of undefined

and when i try to drag the elements , all the elements are considered as one single unit and dragged , in deed i want each li element to act indivually and be draggable.

Getting Error -

Uncaught TypeError: Cannot read property 'splice' of undefined

1

There are 1 best solutions below

1
On BEST ANSWER

Do you have more code to show us? Had the same error message today and fixed it by setting ng-model to the same list as ng-repeat.

<div as-sortable="dragControlListeners" ng-model="foo">
   <div ng-repeat="bar in foo">
     <div as-sortable-item class="as-sortable-item">
        Lorum ipsum
        <div as-sortable-item-handle class="as-sortable-item-handle">Drag</div>
     </div>
   </div>
</div>