I'm working on an app built in angular, mongodb, strongloop/loopback framework. User will see a table of expenses, and needs to be able to rearrange (using ui-sortable drag & drop) them into a desired order, which needs to be stored so that the order is there next time they visit the page, refresh, etc.
Here is my html, which seems to successfully bind expense.order to the row index as rows are moved around.
<tbody ui-sortable ng-model="expenses" >
<tr ng-repeat="expense in expenses">
<td ng-bind="expense.order = $index +1">{{expense.order}}</td>
Problem is that I can't seem to get the controller to recognize that expense.order has changed in order to update it.
$scope.$watch("expense.order", function(newVal, oldVal) {
if(newVal !== oldVal) {
console.log("A change happened! Moved order index from " + oldVal + " to " + newVal);
}
});
What am I doing wrong? Still very much in the early learning phases. Thanks!
Some additional info - the expense data is fetched with this little bit of code:
function getExpenses() {
$scope.expenses = User.expenses({
id:$scope.user.id,
"filter": {
"where": {"propertyId": $routeParams.id},
"order": "order ASC"
}
})
}
expensedoesn't exist in controller, it only exists in child scope ofng-repeat. Use the options to pass event callbacks to the directive per the demos. The jQueryUI docs will also be a big help since that is the api being used