1

I'm trying to bind the angularJS ui-sortable to a specific value in the model, list : field.sort_order to be exact.

But cant seem to get it working, the sortable js code is working and moves the objects around in the model but wont update that specific value, basically I don't know how to pass it the specific field to update/read, is this possible?

I have the following scripts for angularJS running:

'//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js'
'//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js'  


  <tbody ui-sortable ng-model="list">
        <tr ng-repeat="(key, field) in list">
            <td><img src="/images/defaults/updown_ico_small.png"></td>
            <td><input type="text" ng-model="field.field_name" /></td>
            <td>
                <select ng-if="..." ng-model="..." ng-options="..."></select>
                <select ng-if="..." ng-model="..." ng-options="..."></select>
            </td>
            <td>
                <button ng-click="...">Delete</button>
            </td>
        </tr>
    </tbody>

This is the output from this snippet

enter image description here

Array example:

1 => 
    array
      'id' => string '2' (length=1)
      'download_type' => string 'custom' (length=6)
      'download_ext' => string 'csv' (length=3)
      'project_id' => string '157' (length=3)
      'DownloadField' =>   // this is what i call 'list' in the example
        array
          0 => 
            array
              'id' => string '18' (length=2)
              'field_reference' => string 'FALSE' (length=5)
              'field_name' => string 'Delete flag' (length=11)
              'sort_order' => string '0' (length=1)
          1 => 
            array
              'id' => string '19' (length=2)
              'field_reference' => string 'CUSTOM_RESULT_QUESTION' (length=22)
              'field_name' => string 'Category ID' (length=11)
              'sort_order' => string '1' (length=1)
          2 => 
            array
              'id' => string '20' (length=2)
              'field_reference' => string 'CUSTOM_RESULT_ANSWER' (length=20)
              'field_name' => string 'Category Value' (length=14)
              'sort_order' => string '2' (length=1)
          3 => 
            array
              'id' => string '21' (length=2)
              'field_reference' => string 'company_alt_name' (length=16)
              'field_name' => string 'Exhibitor ID' (length=12)
              'sort_order' => string '3' (length=1)
 2 =>

2 will contain a similar set of data.

Improve this question
5
  • Is list an object or an array? Commented Aug 22, 2014 at 16:36
  • It's a associative array (passed in from php) Commented Aug 22, 2014 at 16:45
  • codepen.io/thgreasi/pen/iKEHd maybe add sortableOptions Commented Aug 22, 2014 at 17:37
  • I've been looking at that but im not entirely sure how to pass the data i want into any of the functions. 'list' is an array of an array so i need to pass both indexes.. but im unsure how to pass any data to the ui-sortable directive? Still quite new the angularjs :S Commented Aug 22, 2014 at 18:19
  • Since list is an array, the syntax for looping over it should be ng-repeat="item in list". Commented Aug 22, 2014 at 20:10

3 Answers 3

Reset to default
1

JavaScript objects (they're different from associative arrays, but kind of look like them) are not ordered so ui-sortable cannot be used to re-order them. You have to use an array. You could, for example, convert your object into an array of pairs.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

"Array.isArray($scope.formData)" returns true, which is the root data for this example. Does that not mean it is an array?
Also, in my code, it happily moves the row in the array up and down with the sortable controls. But I want it to change the field 'sort_order' inside that row. Which I was hoping there to be something for?
formData? In your code, the variable you give to the ng-model of ui-sortable is list. Are they the same thing?
Ive updated my question with a representation of the array in php. This is essentially formData
It looks like an array, yes. Consider this answer obselete. :)
1

Pass a configuration object to the ui-sortable directive, with a handler function for the stop event.

View

<tbody ui-sortable="sortableOptions" ng-model="list">

Controller

$scope.sortableOptions = {
    stop: function (event, ui) {}
};

The second parameter of the handler contains what you need:

  • ui.item.sortable.index is the index where the dragged item was before it was dragged
  • ui.item.sortable.dropindex is the index where the dragged item was dropped

From there you can loop through all the items which index was changed and update them.

DEMO

Improve this answer

2 Comments

Away from the workstation atm, but this looks promising. Will give a go later today get back to you :)
This is really close to working, but im again stuck at the fact the data i need to loop is nested inside another parent. I need to pass the parent index too but am unsure how to pass custom information.
0

After I stopped trying to see how I could get data passed into the stop method, I realised I had all the information I needed to update the sort_order variable.
The sortable was working in so much as it reordered the array, using that information I did:

stop: function(e, ui) {
    for(var i = 0; i < $scope.formData.length; i++){
        for(var j = 0; j < $scope.formData[i]['DownloadField'].length; j++){
            $scope.formData[i]['DownloadField'][j]['sort_order'] = j;
        }
    }
}

It may not be the lightest approach and I will probably add some checks for updates/new data etc. but it works.

Improve this answer

Comments

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.