Question

我已将对象数组传递给表。该表具有ui-sortable

<table class="table table-hover">  
<tbody ui-sortable="sortableOptions">
  <tr ng-repeat="f in building.floors" ng-click="events.goToFloor(f.id)">
    <td>{{f.id}}</td>
    <td>{{f.level + building.minimumFloor}}</td>
    <td><button id="remove" class="btn btn-danger" ng-click="events.removeFloor(f.id);$event.stopPropagation();">Remove</button></td>
  </tr>
  </tbody>
</table>

现在使用

$scope.sortableOptions = {
        update: function(e, ui) {
            var i : number = 0;
            $scope.building.floors.forEach(f => {  
                alert(f.level);   
                f.level = i;
                i++;
            });
        }
    };

我想将级别值更改为新顺序但我仍然获得预排序的foreach顺序。如何以新的顺序迭代数组（排序后）？

编辑：

我使用这些库：

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>

    <script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap-switch.min.js"></script>     

    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>         
    <script src="scripts/fabricjs_viewport.js"></script>

EDIT2：

当ia使用ui-sortable选项将ng-model添加到tbody时我无法交换最后一个元素，如果我这样做...会有奇怪的行为

<tbody ui-sortable="sortableOptions" ng-model="floors">
  <tr ng-repeat="f in floors" ng-click="events.goToFloor(f.id)">
    <td>{{f.id}}</td>
    <td>{{f.level}}</td>
    <td><button id="remove" class="btn btn-danger" ng-click="events.removeFloor(f.id);$event.stopPropagation();">Remove</button></td>
  </tr>
  </tbody>

Answer 1

根据您缺少ng-model

的文档

将指令应用于表单元素：

<ul ui-sortable ng-model="items">
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

开发笔记：

ng-model是必需的，因此指令知道要更新的模型。 ui-sortable元素应该只包含一个ng-repeat而不包含任何其他元素（上面或下面）。

否则，生成的DOM元素和ng-model项目的索引匹配将会中断。

换句话说：ng-model的项必须与生成的DOM元素的索引匹配。

操作模型的过滤器（如filter，orderBy，limitTo，...）应该应用于控制器而不是ng-repeat（参考提供的示例）。

这是首选的方式：

是性能明智的，可以更好地降低代码重复的可能性
由angularJS团队建议
它不会破坏生成的DOM元素和ng-model项目的匹配

ui-sortable列表包含许多＆＃39;类型＆＃39;可以通过使用动态模板加载ng-include或loader指令来实现项目，以确定应如何呈现每个模型项目。另请参阅使用动态模板示例的树。

https://github.com/angular-ui/ui-sortable#usage

按排序顺序获取数组

1 个答案: