Пользовательская сортировка AngularJ не будет принимать значения, возвращаемые функцией

0

Я называю 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 я создал?

Теги:
sorting

1 ответ

0
Лучший ответ

Хотя есть определенный способ заставить его работать с помощью функции на заказ, как ленивый программист, который не хочет узнать, как это сделать, я бы вычислил все байты в секунду для каждого элемента и сохранил его как атрибут.

angular.forEach($scope.results, function(value) {
  value.bytesPerSecond = $scope.bytesPerSecond(value.connected, value.disconnected, value.traffic);
});

И альт вы можете поделиться кодом с другими атрибутами =)

  • 0
    Если возможно, я бы не хотел писать в исходную базу данных, я бы предпочел вести вычисления локально.
  • 0
    Используемый json существует только на стороне клиента, как он влияет на базу данных? Может быть, в этом случае вы все еще можете рассчитывать на лету, но для чего-то вроде отслеживания выбранного флажка, лучше сохранить в объекте.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню