Sushrut Sushrut - 1 year ago 757
AngularJS Question

Sort or Rearrange Rows of a table in angularjs (drag and drop)

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 :
using Angular Directive?

I am generating table as :

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

Answer Source

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


<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">

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']);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download