我想要在表格中重新排列行的功能(使用拖放操作排序行)。 行排列的索引也应该在模型中改变。
我该如何做与此类似的事情:http://jsfiddle.net/tzYbU/1162/ 使用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>
答案 0 :(得分: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']);
答案 1 :(得分:11)
还有另一个图书馆:RubaXa / Sortable:https://github.com/RubaXa/Sortable
适用于现代浏览器,没有jQuery依赖。包括角度指令。我现在要去检查一下。
您还可以获得良好的触控支持。
答案 2 :(得分:5)
AngularJS并非真正构建用于DOM元素的操作,而是扩展页面的HTML。
对于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()
。
答案 3 :(得分:1)
如果我理解正确,您希望能够对行进行排序吗?如果是,请使用UI-Sortable:GitHub 演示:codepen.io/thgreasi/pen/jlkhr
答案 4 :(得分:1)
与RubaXa / Sortable一起,还有一个可用的angularjs库 angular-ui-tree 。随着拖放,我们可以在树结构中排列元素,我们可以添加和删除元素(节点)
请参阅此链接以获取示例
http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example。
请参阅github
答案 5 :(得分:1)
其他任何想要这样的事情但却不理解接受的答案的人。以下是AngularJS的指令 UI.Sortable ,它允许您使用drag&amp ;;对数组/表行进行排序。下降。
<强>要求强>
JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+
<强>用法强>
在您的应用程序中加载脚本文件:sortable.js :(您可以从here
找到此 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>
开发笔记:
第3点非常重要,因为花了将近一个小时才能理解 为什么我的排序不起作用?这是因为html中的orderBy 那就是重新重新排序。
为了更加了解,您可以查看详细信息here。