使用 AngularJs 的可排序表格列 [英] Sortable table columns with AngularJs

问题描述

我正在尝试对从 JSON 源填充的数据表进行排序.我的代码如下:

HTML:

<div ng-controller="PurchasesCtrl"><table cellpacing="0"><tr class="first"><th class="first" ng:click="changeSorting(purchases.date)">日期</th><th ng:click="changeSorting(purchases.text)">描述</th><th ng:click="changeSorting(purchases.price)">金额</th><th ng:click="changeSorting(purchases.availability)">状态</th></tr><tr ng-repeat="purchase in purchase.data"><td class="first">{{purchase.date}}</td><td>{{purchase.text}}</td><td>{{purchase.price}}</td><td>{{purchase.availability}}</td></tr>

JS:

var myApp = angular.module("myApp",[]);myApp.factory("采购", function(){var 购买 = {};采购数据 = [{日期:10/05/2012"，文本:1 Lorem ipsum dolor 坐 amet ipsum dolor"，价格:123.45 英镑"，可用性:1 可用至 2013 年 12 月 10 日"},{日期:24/05/2012"，文本:2 Lorem ipsum dolor 坐 amet ipsum dolor"，价格:234.56 英镑"，可用性:2 可用至 2013 年 12 月 10 日"},{日期:20/05/2012"，文字:3 Lorem ipsum dolor 坐 amet ipsum dolor"，价格:345.67 英镑"，可用性:3 可用至 2013 年 12 月 10 日"}];退货；});功能采购Ctrl($范围，采购){$scope.purchases = 购买；$scope.changeSorting = 函数(列){var sort = $scope.sort;如果(排序.列==列){sort.descending = !sort.descending;} 别的 {sort.column = 列；sort.descending = false;}};}

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

如您所见，我已尝试向表标题添加单击函数以调用对数据进行排序的函数，但它不起作用.

我在这里看到了这种工作的例子:http://jsfiddle.net/vojtajina/js64b/14/，但是当我尝试将同样的事情应用于我的场景时，它很快就会崩溃；例如，我尝试通过添加以下内容以编程方式在 JSON 中添加表头:

var Purchases = {};采购.head = [{日期:日期"，text: "文本列",价格:价格栏"，可用性:可用性列"}采购数据 = [{日期:10/05/2012"，文本:1 Lorem ipsum dolor 坐 amet ipsum dolor"，价格:123.45 英镑"，可用性:1 可用至 2013 年 12 月 10 日"},

这只是阻止了任何事情的工作，但我认为可以将多组数据添加到 Angular 变量中?

我完全是 Angular 的新手，所以我真的坚持这个.任何指针将不胜感激，谢谢.

解决方案

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

sza 是对的，您确实忘记了 $scope.sort 对象，但是您也缺少 ng-repeat 中的 orderBy 过滤器

|orderBy:sort.column:sort.descending

此外，您需要将列名显式传递给 changeSorting() 函数，例如

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

不确定是否有其他方法可以处理此问题.

最后，ng-click 是您使用的 AngularJS 版本的正确语法.

I'm trying to sort a table of data which is populated from a JSON source. The code I have is as follows:

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/

As you can see I've tried to add a click function to the table headers to call a function that sorts the data, but it's not working.

I've seen an example of this kind of thing which does work, here: http://jsfiddle.net/vojtajina/js64b/14/, but when I try to apply the same kind of thing to my scenario it breaks very quickly; for example, I tried adding the table headers programatically in JSON by adding the following:

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"
        },

This just prevents anything from working, but I thought it would be possible to add multiple sets of data to an Angular variable?

I'm a total new-comer to Angular so I'm really stuck with this. Any pointers would be much appreciated, thanks.

解决方案

Updated jsfiddle: http://jsfiddle.net/gweur/

sza is right, you did forget the $scope.sort object, but you are also missing the orderBy filter in your ng-repeat

|orderBy:sort.column:sort.descending

Additionally, you'll need to explicitly pass the column name to the changeSorting() function, like

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

not sure if there is a different way you can handle this.

Finally, ng-click is the correct syntax for the version of AngularJS you are using.

这篇关于使用 AngularJs 的可排序表格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！