Question

我正在尝试将angularJS ui-sortable绑定到模型中的特定值，list：field.sort_order是准确的。

但似乎无法使其工作，可排序的js代码正在工作并在模型中移动对象但不会更新该特定值，基本上我不知道如何将特定字段传递给更新/读取，这可能吗？

我有以下运行angularJS的脚本：

'//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>

这是此代码段的输出

enter image description here

数组示例：

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将包含一组类似的数据。

Answer 1

JavaScript对象（它们与关联数组不同，但看起来像它们）不是有序的，所以ui-sortable不能用于重新排序它们。你必须使用一个数组。例如，您可以将对象转换为对数组。

Answer 2

将配置对象传递给ui-sortable指令，并使用stop事件的处理函数。

查看

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

控制器

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

处理程序的第二个参数包含您所需的内容：

ui.item.sortable.index是拖动项目拖动之前的索引
ui.item.sortable.dropindex是拖放项目被删除的索引

从那里你可以遍历索引被更改的所有项目并更新它们。

DEMO

Answer 3

在我停止尝试查看如何将数据传递到stop方法后，我意识到我拥有更新sort_order变量所需的所有信息。
使用我所做的信息，sortable正在重新排序数组：

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;
        }
    }
}

它可能不是最轻的方法，我可能会为更新/新数据等添加一些检查但是它有效。

AngularJs AngularUI可排序模型链接到特定字段

3 个答案: