在angularjs中对表格的行进行排序或重新排列(拖放)

问题描述

我想要重新排列表格中的行的功能(使用拖放对行进行排序).而且模型中行排列的索引也应该改变.

我该如何做类似的事情:http://jsfiddle.net/tzYbU/1162/使用 Angular 指令?

我正在生成表格:

<头><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="rule.ruleData 中的数据">{{statusArr[data.value]}}</td></tr></tbody>

解决方案

我做到了.请参阅下面的代码.

HTML

<table style="width:auto;"class="table table-bordered"><头><tr><th>索引</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}}<小时>

指令 (JS)

var myapp = angular.module('myapp', ['ui']);myapp.controller('controller', function ($scope) {$scope.list = [一"、二"、三"、四"、五"、六"];});angular.bootstrap(document, ['myapp']);

I wanted to have the 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. See my code below.

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中对表格的行进行排序或重新排列(拖放)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！