Я называю API, который использует моя компания, который возвращает массив объектов, один из которых выглядит так:
{ip = 127.0.0.1,
connected: 2015-01-01 00:00:00,
disconnected: 2015 01-01 01:00:00,
traffic:90000}
Я могу создать приложение, которое создает таблицу с ng-repeat
которая сортируется по ip
, connected
и disconnected
. traffic
var - это количество байтов, переданных во время сеанса, поэтому я вычитал даты, чтобы получить количество байтов, переданных в секунду, и смог отобразить их в таблице, таблица которых выглядит ниже. Щелчок по заголовкам сортирует таблицу по этому значению, и щелчок по ней снова изменит ее и отобразит соответствующую стрелку. results
- ответ от сообщения http:
JS:
$scope.reverseOrder = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : true ;
$scope.predicate = predicate;
};
$scope.bytesPerSecond = function(startDate, endDate, traffic) {
var from = moment(startDate);
var to = moment(endDate);
var seconds = to.diff(from, 'seconds');
return traffic/seconds;
};
HTML:
<table class="...">
<thead>
<th>
<a href="" ng-click="reverseOrder('ip')">IP Address</a>
<i ng-class="{'icon-arrow-down' : reverse && predicate==='ip', 'icon-arrow-up' : !reverse && predicate==='ip'}"></i>
</th>
<th>
<a href="" ng-click="reverseOrder('connected')">Time Connected</a>
<i ng-class="{'icon-arrow-down' : reverse && predicate==='connected', 'icon-arrow-up' : !reverse && predicate==='connected'}"></i>
</th>
<th>
<a href="" ng-click="reverseOrder('disconnected')">Time Disconnected</a>
<i ng-class="{'icon-arrow-down' : reverse && predicate==='disconnected', 'icon-arrow-up' : !reverse && predicate==='disconnected'}"></i>
</th>
<th>
<a href="" ng-click="reverseOrder(bytesPerSecond)">Bytes per second</a>
<i ng-class="{'icon-arrow-down' : reverse && predicate===bytesPerSecond, 'icon-arrow-up' : !reverse && predicate===bytesPerSecond}"></i>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in results | orderBy:predicate:reverse">
<td style="text-align: left;">{{result.ip}}</td>
<td style="text-align: center;">{{result.connected}}</td>
<td style="text-align: center;">{{result.disconnected}}</td>
<td style="text-align: right;">{{bytesPerSecond(result.connected,result.disconnected,result.traffic)| number:0}}</td>
</tr>
</tbody>
</table>
Функция reverseOrder
работает для ip
и дат, но она не будет работать с функцией bytesPerSecond
. Я прочитал в угловой документации, что директива orderBy
может использоваться для значений из функций, но я не уверен, почему она не работает. Он просто отображает и переключает стрелку рядом с заголовком и не сортирует значения вообще. Как получить таблицу для сортировки по функции bytesPerSecond
я создал?
Хотя есть определенный способ заставить его работать с помощью функции на заказ, как ленивый программист, который не хочет узнать, как это сделать, я бы вычислил все байты в секунду для каждого элемента и сохранил его как атрибут.
angular.forEach($scope.results, function(value) {
value.bytesPerSecond = $scope.bytesPerSecond(value.connected, value.disconnected, value.traffic);
});
И альт вы можете поделиться кодом с другими атрибутами =)