使用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;
        }
    };
}

小提琴:http://jsfiddle.net/7czsM/1/

正如您所看到的,我已经尝试在表标题中添加一个click函数来调用一个对数据进行排序的函数,但它不起作用.

我已经看到了这样一个有效的例子,这里有: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"
        },

这只是阻止任何工作,但我认为可以将多组数据添加到Angular变量？

我是Angular的新手,所以我真的很喜欢这个.任何指针都将非常感谢,谢谢.

Answer 1

更新了jsfiddle:http://jsfiddle.net/gweur/

sza是对的,你确实忘记了$ scope.sort对象,但你也错过了ng-repeat中的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,它在分页方面做得很好.

这是掠夺者

这是github源代码.