I am creating a table with dragable rows with the help of ui-sortable
<tbody ui-sortable="sortableOptions" ng-model="model.list">
<tr ng-repeat="item in model.list">
<td>
<div class="form-group">
<input type="text" class="form-control test-input" ng-model="item.Country" ng-readonly="!isEditable">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="form-control test-input" ng-model="item.Value" ng-readonly="!isEditable">
</div>
</td>
</tr>
This is the code in controller.
$scope.sortableOptions = {
update: function(e, ui) {
console.log(model.list);
},
stop: function(e, ui) {
console.log(model.list);
}
};
I have made use of require.js and the dependency ui.sortable is added over there.
Whenever I open the page with this table, I am getting this error -
angular.js:12520
TypeError: g.sortable is not a function
at w (http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:4649)
at x (http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:4721)
at link (http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:5003)
at http://localhost:90/bower_components/angular/angular.js:8835:44
at invokeLinkFn (http://localhost:90/bower_components/angular/angular.js:8841:9)
at nodeLinkFn (http://localhost:90/bower_components/angular/angular.js:8335:11)
at compositeLinkFn (http://localhost:90/bower_components/angular/angular.js:7731:13)
at nodeLinkFn (http://localhost:90/bower_components/angular/angular.js:8330:24)
at compositeLinkFn (http://localhost:90/bower_components/angular/angular.js:7731:13)
at compositeLinkFn (http://localhost:90/bower_components/angular/angular.js:7734:13) <tbody ui-sortable="sortableOptions" ng-model="model.list" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
Can you please help me out? Thanks in advance
ui-sortable depends on jQuery, jQuery UI 1.9+. Check if you have these dependencies before ui-sortable js file, then you should inject the ui.sortable in the correct module angular.module('myapp', ['ui.sortable']);