26

我想要重新排列表格中的行的功能（使用拖放对行进行排序）。 并且行排列的索引也应该在模型中改变。

我怎样才能做类似的事情：http: //jsfiddle.net/tzYbU/1162/ using Angular Directive？

我生成表为：

<table id="sort" class="table table-striped table-bordered">
  <thead>
    <tr>
      <th class="header-color-green"></th>
      <th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
    </tr>
  </thead>
  <tbody ng-repeat="rule in Rules.data">
    <tr>
      <td class="center"><span>{{rule.ruleSeq}}</span></td>
      <td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
    </tr>
  </tbody>
</table>
4

6 回答 6

48

我做的。请参阅下面的代码。

HTML

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

指令 (JS)

var myapp = angular.module('myapp', ['ui']);

myapp.controller('controller', function ($scope) {
    $scope.list = ["one", "two", "thre", "four", "five", "six"];
});

angular.bootstrap(document, ['myapp']);
于 2013-09-05T12:51:47.970 回答
11

还有另一个库： RubaXa/Sortable：https://github.com/RubaXa/Sortable

它适用于现代浏览器并且没有 jQuery 依赖。包括一个角度指令。我现在要检查一下。

您还可以获得良好的触控支持。

于 2015-06-26T10:56:43.713 回答
5

AngularJS 并不是真正为操作DOM 元素而构建的，而是为了扩展页面的 HTML。

请参阅此问题和此Wikipedia 条目。

对于 DOM 操作，jQuery/mootools/etc 将非常适合您（提示：您的 jsFiddle 链接中的示例）。

您可能可以使用 AngularJS 来跟踪元素的顺序以更新模型。我不确定如何使用指令执行此操作，但以下代码可能有用

var MyController = function($scope, $http) {
    $scope.rules = [...];
    ...

}

var updateRules = function(rule, position) {
    //We need the scope
    var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'

    //Update scope.rules
}

然后，当您重新排序列表时，只需updateRules()使用更改后的规则及其在模型中的新位置进行调用。

于 2013-09-04T13:21:33.743 回答
2

任何想要这样但不理解接受的答案的人。这是 AngularJS 的指令UI.Sortable，它允许您通过拖放对数组/表格行进行排序。

要求

JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+

用法

在您的应用程序中加载脚本文件：sortable.js：（您可以从这里找到这个sortable.js

<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

确保在此可排序文件之前按顺序包含 JQuery、AngularJs 和 JQueryUI js 文件将可排序模块作为依赖项添加到您的应用程序模块：

 var myAppModule = angular.module('MyApp', ['ui.sortable'])

将指令应用于您的表单元素：

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

开发说明：

  1. ng-model 是必需的，以便指令知道要更新哪个模型。
  2. ui-sortable 元素应该只包含一个 ng-repeat
  3. 操纵模型的过滤器（如 filter、orderBy、limitTo 等）应在控制器中应用，而不是 ng-repeat

第三点非常重要，因为花了将近一个小时才明白为什么我的排序不起作用？这是因为 html 中的 orderBy 并且再次重置了排序。

如需更多了解，您可以在此处查看详细信息。

于 2017-11-21T12:18:42.067 回答
1

如果我理解正确，您希望能够对行进行排序？如果是这样，请使用 UI-Sortable：GitHub 演示：codepen.io/thgreasi/pen/jlkhr

于 2015-04-01T08:08:30.707 回答
1

除了 RubaXa/Sortable 之外，还有一个可用的 angularjs 库，即angular-ui-tree。除了拖放之外，我们还可以在树结构中排列元素，并且可以添加和删除元素（节点）

请参阅此链接以获取示例

http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example。

请在 github 上查看此内容

https://github.com/angular-ui-tree/angular-ui-tree。

于 2015-11-26T11:17:01.947 回答