[英]AngularJS sorting by time difference
I want to enable sorting by each of my table fields. 我想启用每个表字段的排序。 I have one column which shows how many minutes it took to work on project, but sorting by this field doesn't work properly.
我有一个列显示了在项目上花了多少分钟,但按此字段排序无法正常工作。
<table>
<th ><a href="" ng-click="sortBy='task.company_name'">Company</a></th>
<th><a href="" ng-click="sortBy='timediff(task.time_start,task.time_stop)'">Time difference</a><th />
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td >{[{ task.company_name }]}</td>
<td >{[{ timediff(task.time_start,task.time_stop) }]}</td>
</tr>
</table>
timediff function: timediff功能:
$scope.timediff = function(start, end){
var start = moment(start);
var end = moment(end);
var diff = end.diff(start,'minutes',true);
return (diff/60).toPrecision(3);
};
Plunker : http://plnkr.co/edit/vdkfNkgpdLUp9RgZ1IvO?p=preview Plunker : http : //plnkr.co/edit/vdkfNkgpdLUp9RgZ1IvO?p=preview
Simple fix, just need to assign the function to a parameter 简单的修复,只需要将函数分配给参数
<tr>
<th><a href="" ng-click="sortBy='company_name'">Company</a></th>
<th><a href="" ng-click="sortBy='timediff'">Time difference</a></th>
</tr>
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td>{{ task.company_name }}</td>
<td>{{ task.timediff = timediff(task.time_start,task.time_stop) }}</td>
</tr>
Here is an updated plunker showing this as well as adding a reverse sort. 这是一个更新的plunker显示这个以及添加反向排序。
There is a simpler way for the custom function to work. 自定义函数有一种更简单的工作方式。 I edited the dataset a bit to make the switch between "Company" and "Time difference" a bit more clear.
我稍微编辑了数据集,使“公司”和“时差”之间的切换更加清晰。
Option 1 ( DEMO ): 备选方案1 ( DEMO ):
If the property names don't change you can do the following : 如果属性名称未更改,则可以执行以下操作:
$scope.timediff = function(task){
var start = moment(task.time_start);
var end = moment(task.time_stop);
var diff = end.diff(start,'minutes',true);
return (diff/60).toPrecision(3);
};
And in your html assign the function to your sortBy
variable: 并在您的html中将函数分配给
sortBy
变量:
<th ><a href="" ng-click="sortBy='company_name'">Company</a></th>
<th><a href="" ng-click="sortBy=timediff">Time difference</a></th>
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td >{{ task.company_name }}</td>
<td >{{ timediff(task)}}</td>
</tr>
Angular automatically passes the current item into the function defined in orderBy
. Angular自动将当前项传递给
orderBy
定义的函数。
Option 2 (more flexible) ( DEMO ): 选项2(更灵活) ( DEMO ):
If you want to define the property names on the fly you can return another function: 如果要动态定义属性名称,可以返回另一个函数:
$scope.timediff = function(name1, name2){
return function(item) {
var start = moment(item[name1]);
var end = moment(item[name2]);
var diff = end.diff(start,'minutes',true);
return (diff/60).toPrecision(3);
}
};
And give it the two property names: 并给它两个属性名称:
<th ><a href="" ng-click="sortBy='company_name'">Company</a></th>
<th><a href="" ng-click="sortBy=timediff('time_start', 'time_stop')">Time difference</a></th>
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td >{{ task.company_name }}</td>
<td >{{ timediff('time_start', 'time_stop')(task)}}</td>
</tr>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.