不要在angular-tablesort中排序

时间:2015-01-16 07:14:21

标签: angularjs sorting

我尝试使用角度排序,但也许我做错了,因为这段代码不起作用。我的错误在哪里?所有thead可点击,但它确实在表中排序数据,只需在点击时更改css样式。也许我写了错误的ts标准或错误的数据工作? 我的表:

<table ts-wrapper>
                <thead>
                    <tr>
                        <th class="add">Add</th>
                        <th ts-criteria="population" ng-repeat="year in vm.years" ts-repeat>{{ year }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="city in vm.cities" ts-repeat>
                        <td >{{ city.name }}</td>
                        <td ng-repeat="population in city.population">{{ population }}</td>
                    </tr>
                </tbody>
            </table>

这是我的控制者:

(function  () {
    'use strict';
    var app = angular.module("app",['tableSort']);

    app.controller("TableController", TableController);

    function TableController () {
        var vm = this;
        vm.years = ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'];
        vm.cities = [
            {
                "name":"Москва",
                'population':{
                    '2005': '7000000',
                    '2006':'7300000',
                    '2007':'7800000',
                    '2008':'8000000',
                    '2009':'8400000',
                    '2010':'8700000',
                    '2011':'9000000',
                    '2012':'9400000',
                    '2013':'9800000',
                    '2014':'10000000'
                }
            },
            {
                "name":"Санкт-Петербург",
                'population':{
                    '2005':'6000000',
                    '2006':'6300000',
                    '2007':'6800000',
                    '2008':'7000000',
                    '2009':'7400000',
                    '2010':'7700000',
                    '2011':'8000000',
                    '2012':'8400000',
                    '2013':'8800000',
                    '2014':'9000000'
                }
            },
            {
                "name":"Калининград",
                'population':{
                    '2005':'2000000',
                    '2006':'2300000',
                    '2007':'2800000',
                    '2008':'3000000',
                    '2009':'3400000',
                    '2010':'3700000',
                    '2011':'4000000',
                    '2012':'4400000',
                    '2013':'4800000',
                    '2014':'4900000'
                }
            },
            {
                "name":"Архангельск",
                'population':{
                    '2005':'295000',
                    '2006':'300000',
                    '2007':'305000',
                    '2008':'308000',
                    '2009':'310000',
                    '2010':'315000',
                    '2011':'318000',
                    '2012':'324000',
                    '2013':'331000',
                    '2014':'341000'
                }
            },
            {
                "name":"Астрахань",
                'population':{
                    '2005':'493000',
                    '2006':'497000',
                    '2007':'499000',
                    '2008':'502000',
                    '2009':'504000',
                    '2010':'507000',
                    '2011':'509000',
                    '2012':'513000',
                    '2013':'514000',
                    '2014':'520000'
                }
            },
            {
                "name":"Уфа",
                'population':{
                    '2005':'1028000',
                    '2006':'1034000',
                    '2007':'1036000',
                    '2008':'1038000',
                    '2009':'1042000',
                    '2010':'1047000',
                    '2011':'1051000',
                    '2012':'1054000',
                    '2013':'1059000',
                    '2014':'1062000'
                }
            },
            {
                "name":"Белгород",
                'population':{
                    '2005':'318000',
                    '2006':'321000',
                    '2007':'330000',
                    '2008':'333000',
                    '2009':'339000',
                    '2010':'342000',
                    '2011':'345000',
                    '2012':'350000',
                    '2013':'354000',
                    '2014':'356000'
                }
            },
            {
                "name":"Брянск",
                'population':{
                    '2005':'381000',
                    '2006':'384000',
                    '2007':'390000',
                    '2008':'394000',
                    '2009':'397000',
                    '2010':'400000',
                    '2011':'402000',
                    '2012':'404000',
                    '2013':'413000',
                    '2014':'415000'
                }
            },
            {
                "name":"Улан-Удэ",
                'population':{
                    '2005':'370000',
                    '2006':'372000',
                    '2007':'375000',
                    '2008':'379000',
                    '2009':'384000',
                    '2010':'391000',
                    '2011':'396000',
                    '2012':'397000',
                    '2013':'400000',
                    '2014':'404000'
                }
            },
            {
                "name":"Волгоград",
                'population':{
                    '2005':'991000',
                    '2006':'995000',
                    '2007':'999000',
                    '2008':'1001000',
                    '2009':'1004000',
                    '2010':'1010000',
                    '2011':'1012000',
                    '2012':'1015000',
                    '2013':'1019000',
                    '2014':'1021000'
                }
            },
        ];
    }
}());

1 个答案:

答案 0 :(得分:1)

[答案更新以匹配您的小提琴]

有很多问题:

  • 最糟糕的是,tablesorter不处理条件列 名称是数字(例如一年)。所以他们需要 只能作为字符串解析。例如“y2010”。

  • ts-criteria =“population ['year']”的东西不起作用。没有这样的数组。

  • 它似乎不喜欢你的“追踪”指令。

  • 它也不喜欢数据列中的ng-repeats,所以我不得不取出填充子对象。

  • 此外,您没有为ts标准指定过滤器,因为人口编号将按字符串排序(例如“900”&gt;“10000”),这会搞砸您的排序。

所以基本上tableorter只有在你按照示例代码真的关闭时才会起作用:-)。除非你开始解决这些问题。在http://jsfiddle.net/o15bLvb2/2/有一个小提琴,这使得所有这些工作。

你的身体变成了:

<body ng-app="app" ng-controller="TableController as vm">
        <table  cellpadding="10" cellspacing="10" ts-wrapper >
            <thead>
                <tr>
                    <th class="add" ts-criteria="add" ts-default>Add</th>
                    <th ts-criteria="y2005|parseInt">y2005</th>
                    <th ts-criteria="y2006|parseInt">y2006</th>
                    <th ts-criteria="y2007|parseInt">y2007</th>
                    <th ts-criteria="y2008|parseInt">y2008</th>
                    <th ts-criteria="y2009|parseInt">y2009</th>
                    <th ts-criteria="y2010|parseInt">y2010</th>
                    <th ts-criteria="y2011|parseInt">y2011</th>
                    <th ts-criteria="y2012|parseInt">y2012</th>
                    <th ts-criteria="y2013|parseInt">y2013</th>
                    <th ts-criteria="y2014|parseInt">y2014</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="city in vm.cities track by city.name" ts-repeat>
                    <td>{{ city.name }}</td>
                    <td>{{ city.y2005 }}</td>
                    <td>{{ city.y2006 }}</td>
                    <td>{{ city.y2007 }}</td>
                    <td>{{ city.y2008 }}</td>
                    <td>{{ city.y2009 }}</td>
                    <td>{{ city.y2010 }}</td>
                    <td>{{ city.y2011 }}</td>
                    <td>{{ city.y2012 }}</td>
                    <td>{{ city.y2013 }}</td>
                    <td>{{ city.y2014 }}</td>
                </tr>
            </tbody>
        </table>
    </body>