1

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"
    }
  })
}
5
  • We need a little more information on the array. How is it structured. It should not be that complicated, if you wire up ui-sortable properly. Commented Oct 20, 2015 at 20:08
  • 1
    expense doesn't exist in controller, it only exists in child scope of ng-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 Commented Oct 20, 2015 at 20:11
  • @Mikey - I posted the code used to get the expenses array. Commented Oct 20, 2015 at 20:18
  • I'm unsure what exactly you are trying to do here. the ng-model of 'expenses' will change automatically as the user drags and drops them. There is no need to have the "order" value there as the current order will be the expenses array. You can just do a deep watch on the expenses array and it will trigger every time something changes order. I usually use a second array, orderedExpenses, and bind to that. That way if I need to do something with the original list order I still have it. Commented Oct 20, 2015 at 22:59
  • I'm just trying to store the order of the expenses array so that when a user comes back to the page, the order they want can be shown without them having to drag and drop again. May be taking an entirely wrong approach, still new at this. Thanks! Commented Oct 21, 2015 at 15:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.