我尝试使用角度排序,但也许我做错了,因为这段代码不起作用。我的错误在哪里?所有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'
}
},
];
}
}());
答案 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>