AngularJS 시차 별 정렬

Question

각 테이블 필드별로 정렬을 사용하고 싶습니다. 프로젝트에서 작업하는 데 몇 분이 걸렸는지를 보여주는 하나의 열이 있지만이 필드로 정렬하면 제대로 작동하지 않습니다.

<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 기능 :

$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

Answer 1

간단한 수정, 단지 매개 변수

<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> 

에 기능을 할당 할 필요가 0이 표시되며 역순 정렬이 추가됩니다.

Answer 2

사용자 지정 기능이 작동하는 더 간단한 방법이 있습니다. "Company"와 "Time difference"사이를 전환하기 위해 데이터 세트를 약간 편집했습니다.

옵션 1 (DEMO) :

속성 이름은 다음을 수행 할 수 있습니다를 변경하지 않으면 :

$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); 
}; 

그리고 당신의 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는 현재 항목을에 정의 된 함수에 자동으로 전달합니다..

옵션 2 (유연) (DEMO) :

당신은 즉석에서 속성 이름을 정의하려면 다른 함수를 반환 할 수 있습니다

$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); 
    } 
}; 

을 그리고 그것을 두 가지 속성을 제공 이름 :

<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>