Sortowanie lub zmiana kolejności wierszy tabeli w angularjs (przeciąganie i upuszczanie)

Question

Chciałem mieć możliwość zmiany kolejności wierszy w tabeli (sortowanie wierszy za pomocą przeciągania i upuszczania). Indeks układu rzędów również powinien się zmienić w modelu.

Jak mogę zrobić coś podobnego do tego: http://jsfiddle.net/tzYbU/1162/ używając dyrektywy kątowej?

jestem generowania tabeli jako:

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

Answer 1

Zrobiłem to, oto skrzypce: 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> 

dyrektywa (JS)

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

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

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

Answer 2

angularjs nie był naprawdę zbudowane dla manipulacji elementów DOM, raczej przedłużyć HTML strony.

Zobacz ten artykuł: question i this Wikipedia.

Do manipulowania DOM, jQuery/mootools/etc będzie dobrze pasował (wskazówka: przykład w twoim łączu jsFiddle).

Prawdopodobnie można użyć AngularJS do śledzenia kolejności elementów w celu aktualizacji modelu. Nie jestem pewien jak to zrobić za pomocą dyrektyw, ale następujący kod może być użyteczne

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 
} 

Wtedy, kiedy zmienić kolejność na liście, po prostu zadzwoń updateRules() ze zmianą rządów i jego nowej pozycji w modelu.

Answer 3

Jeśli rozumiem zostanie poprawnie, chcesz być w stanie sortować wiersze? Jeśli tak, należy UI-Sortable: GitHub Demo: codepen.io/thgreasi/pen/jlkhr

Answer 4

Jest inna biblioteka: RubaXa/Sortable: https://github.com/RubaXa/Sortable

Jest dla nowoczesnych przeglądarek i bez uzależnienia jQuery. Uwzględniono dyrektywę kątową. Zamierzam to teraz sprawdzić.

Dostajesz również dobre wsparcie dotykowe.

Answer 5

Wraz z RubaXa/Sortable jest jeszcze jedna angularjs avilable biblioteka, która jest kątowe-ui-tree. Wraz z przeciągnij i upuść możemy zorganizować elementy w strukturze drzewa i możemy dodawać i usuwać elementy (węzły)

Proszę zobaczyć ten link przykładów

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

Proszę zobaczyć na github

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

Answer 6

Ktoś, kto chce czegoś takiego, ale nie rozumie zaakceptowanej odpowiedzi. Oto dyrektywa dla AngularJS, która umożliwia sortowanie wierszy tablicy/tabeli za pomocą przeciągnięcia kropli o wartości &.

Wymagania

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

wykorzystania

załadować plik skryptu: sortable.js w aplikacji (można znaleźć ten sortable.js z here

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

upewnij się, że zawiera jQuery angularjs i plików jQueryUI JS w kolejności przed tym sortable pliku Dodaj moduł sortable jako zależność do modułu aplikacji:

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

stosowania dyrektywy do elementów formularza :

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

rozwijające Uwagi:

1. ng-model jest wymagany, aby dyrektywa znała model do zaktualizowania.
2. ui sortowalny elementu powinna zawierać tylko jeden ng powtórzyć
3. filtrów manipulującymi typu (jak filtra orderby, limitTo, ...), powinny być stosowane w sterowniku zamiast ng powtarzania

Trzeci punkt jest bardzo ważny, ponieważ zrozumienie zajęło mi prawie godzinę, dlaczego moje sortowanie nie działało? To było z powodu orderBy w html i to zresetowało sortowanie ponownie.

Aby uzyskać więcej informacji, sprawdź szczegóły here.