在angularjs表的排序或重新安排行（拖放） [英] Sort or Rearrange Rows of a table in angularjs (drag and drop)

问题描述

我想有一个表中的行重新排列（排序使用拖放行）的功能。
，并在该行安排的指数也应该改变在模型中。

我可怎么办类似这样： http://jsfiddle.net/tzYbU/1162/
采用了棱角分明指令？

我生成表：

 ＆LT;表ID =类级=table表条纹表镶上＆GT;
  ＆LT;＆THEAD GT;
    ＆所述; TR＆GT;
      百分位类=头彩绿＆GT;＆LT; /第i
      百分位NG重复=头衔Rules.Titles＆GT; {{titles.title}}＆LT; /第i
    ＆LT; / TR＆GT;
  ＆LT; / THEAD＆GT;
  ＆LT; TBODY NG重复=统治Rules.data＆GT;
    ＆所述; TR＆GT;
      ＆LT; TD类=中心＆GT;＆LT;跨度＆GT; {{rule.ruleSeq}}＆LT; / SPAN＆GT;＆LT; / TD＆GT;
      ＆LT; TD NG重复=，在rule.ruleData数据＆GT; {{statusArr [data.value]}}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

解决方案

我做到了，这里是提琴：
表可排序行

HTML

 ＆LT; D​​IV NG：控制器=控制器＆GT;
    ＆LT;表样式=WIDTH：汽车;类=表表镶上＆GT;
        ＆LT;＆THEAD GT;
            ＆所述; TR＆GT;
                ＆LT;第i个指数和LT; /第i
                ＆LT;第i COUNT＆LT; /第i
            ＆LT; / TR＆GT;
        ＆LT; / THEAD＆GT;
        ＆LT; TBODY UI：排序NG：模型=清单＆GT;
            ＆LT; TR NG：重复=项目列表中的阶级=项的风格=光标：移动;＆GT;
                ＆LT; TD＆GT; {{$指数}}＆LT; / TD＆GT;
                ＆LT; TD＆GT; {{}项}＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT; {{列表}}
        ＆LT;小时＆GT;
＆LT; / DIV＆GT;
 

指令（JS）

  VAR的myapp = angular.module（'MyApp的'，['UI']）;myapp.controller（控制器，函数（$范围）{
    $ scope.list = [一，二，THRE，四有，五，六个一];
}）;angular.bootstrap（文件，['的myapp']）;
 

I wanted to have functionality of rearranging rows in a table (sorting rows using drag and drop). And the index of the row arrangement should also change in the model.

How can i do something similar to this : http://jsfiddle.net/tzYbU/1162/ using Angular Directive?

I am generating table as :

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

解决方案

I did it, here is the fiddle : Sortable Rows of Table

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>

Directive (JS)

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

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

angular.bootstrap(document, ['myapp']);

这篇关于在angularjs表的排序或重新安排行（拖放）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！