Сортировка столбцов таблицы с AngularJs

Question

Я пытаюсь сортировать таблицу данных, которая заполняется из источника JSON. Код у меня выглядит следующим образом:

HTML:

<div ng-app="myApp"> 
    <div ng-controller="PurchasesCtrl"> 
     <table cellspacing="0"> 
      <tr class="first"> 
       <th class="first" ng:click="changeSorting(purchases.date)">Date</th> 
       <th ng:click="changeSorting(purchases.text)">Description</th> 
       <th ng:click="changeSorting(purchases.price)">Amount</th> 
       <th ng:click="changeSorting(purchases.availability)">Status</th> 
      </tr> 
      <tr ng-repeat="purchase in purchases.data"> 
       <td class="first">{{purchase.date}}</td> 
       <td>{{purchase.text}}</td> 
       <td>{{purchase.price}}</td> 
       <td>{{purchase.availability}}</td> 
      </tr> 
     </table> 
    </div> 
</div> 

JS:

var myApp = angular.module("myApp",[]); 

myApp.factory("Purchases", function(){ 
    var Purchases = {}; 

    Purchases.data = [ 
     { 
      date: "10/05/2012", 
      text: "1 Lorem ipsum dolor sit amet ipsum dolor", 
      price: "£123.45", 
      availability: "1 Available until 10th Dec 2013" 
     }, 
     { 
      date: "24/05/2012", 
      text: "2 Lorem ipsum dolor sit amet ipsum dolor", 
      price: "£234.56", 
      availability: "2 Available until 10th Dec 2013" 
     }, 
     { 
      date: "20/05/2012", 
      text: "3 Lorem ipsum dolor sit amet ipsum dolor", 
      price: "£345.67", 
      availability: "3 Available until 10th Dec 2013" 
     } 
    ]; 
    return Purchases; 
}); 

function PurchasesCtrl($scope, Purchases){ 
    $scope.purchases = Purchases; 

    $scope.changeSorting = function(column) { 
     var sort = $scope.sort; 

     if (sort.column == column) { 
      sort.descending = !sort.descending; 
     } else { 
      sort.column = column; 
      sort.descending = false; 
     } 
    }; 
} 

Fiddle: http://jsfiddle.net/7czsM/1/

Как вы можете видеть, что я пытался добавить функцию щелчка к заголовкам таблицы для вызова функции, которая сортирует данные, но она не работает.

Я видел пример такого рода вещей, который работает, здесь: http://jsfiddle.net/vojtajina/js64b/14/, но когда я пытаюсь применить то же самое к моему сценарию, он очень быстро ломается; например, я попытался добавить заголовки таблицы в формате JSON программно, добавив следующее:

var Purchases = {}; 

Purchases.head = [ 
     { 
      date: "Date", 
      text: "Text column", 
      price: "Price column", 
      availability: "Availability column" 
     } 

    Purchases.data = [ 
     { 
      date: "10/05/2012", 
      text: "1 Lorem ipsum dolor sit amet ipsum dolor", 
      price: "£123.45", 
      availability: "1 Available until 10th Dec 2013" 
     }, 

Это просто позволяет что-либо от работы, но я думал, что можно было бы добавить несколько наборов данных угловой переменной?

Я полный новичок в Угловом, поэтому я действительно застрял в этом. Любые указатели были бы очень благодарны, спасибо.

Answer 1

Обновлено jsfiddle: http://jsfiddle.net/gweur/

SZA правильно, вы сделали забыть объект $ scope.sort, но вы также отсутствует фильтр OrderBy в вашем нг-повторить

|orderBy:sort.column:sort.descending 

Кроме того, вы» должно будет явно передать имя столбца функции changeSorting(), как

ng-click="changeSorting('text')" 

не уверен, если есть другой способ вы можете справиться с этим.

Наконец, ng-click - это правильный синтаксис для версии AngularJS, которую вы используете.

Answer 2

Еще один очень хороший пример создания таблицы Сортируемый

http://jsfiddle.net/vojtajina/js64b/14/

<th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th> 

scope.changeSorting = function(column) { 
    var sort = scope.sort; 
    if (sort.column == column) { 
     sort.descending = !sort.descending; 
    } else { 
     sort.column = column; 
     sort.descending = false; 
    } 
}; 

Answer 3

Вот мое решение. Я также завершаю все это директивой. Единственная зависимость - UI.Bootstrap.pagination, которая отлично справилась с разбивкой по страницам.

Вот plunker

Вот github source code.

Answer 4

Или вы можете использовать #ngTasty в качестве простой директивы таблицы. github: https://github.com/Zizzamia/ng-tasty docs: http://zizzamia.com/ng-tasty/directive/table