Фильтровать по столбцу, а также сортировать по убыванию в AngularJS

Question

Как сортировать по убыванию, а также фильтровать по столбцу в AngularJS? У меня есть следующий код, который будет по умолчанию для самой последней отметки времени.

 <tr ng-repeat="item in log | orderBy:'-timestamp' ">
    <td>{{item.timestamp | date: 'MM/dd/yyyy HH:MM'}}</td>
    <td>{{item.Action | removeHTMLTags | strip }}</td>
    <td>{{item.AO}}</td>
 </tr>

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

            $scope.reverseOrder = true;
            $scope.sortField = '';
            $scope.sortBy = function(sortField) {
                $scope.reverseOrder = ($scope.sortField == sortField) ? !$scope.reverseOrder : false;
                $scope.sortField = sortField;
            }


      <tr ng-repeat="item in log | orderBy:sortField:reverseOrder">
        <td>{{item.timestamp | date: 'MM/dd/yyyy HH:MM'}}</td>
        <td>{{item.Action | removeHTMLTags | strip }}</td>
        <td>{{item.AO}}</td>
      </tr>

Я хотел бы фильтровать оба столбца, но также по умолчанию показывать самые последние временные метки сверху.

Я попробовал следующее, но это не сработало.

ng-repeat="item in log | orderBy:sortField:reverseOrder | orderBy: '-timestamp'"

Answer 1

Чтобы понять, почему ваш код не работает, вы должны сначала понять, как работает фильтр orderBy в angularjs. В вашем ng-повторе фильтр orderBy имеет два параметра sortField и reverseOrder. Чтобы они работали, у вас должен быть контроллер, который имеет две переменные $ scope с именами соответственно sortField и reverseOrder. Первый параметр - определить, какой ключ должен использовать orderBy, чтобы упорядочить ваш массив, а второй - логическое значение, указывающее, будет ли порядок изменен или нет.

В попытке воспроизвести ваш пример я взял на себя смелость использования unix меток времени в моем массиве журналов. Таким образом, в контроллере

$scope.searchText = "";
$scope.sortField = "timestamp";
$scope.reverseOrder = false;
$scope.logs = [
  {
    timestamp : 2147450400000,
    Action : 'bal sal',
    AO : 'abcd'
  },
  {
    timestamp : 979840800000,
    Action : 'bal sal2',
    AO : 'abcd2'
  },
  {
    timestamp : 1579370400000,
    Action : 'bal sal2',
    AO : 'abcd2'
  }      
]

$scope.sortBy = function(sortField) {
  $scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
  $scope.sortField = sortField;
};

Также в приведенном вами примере они передали имя столбца через функцию. Так что в вашем html вам нужно что-то подобное.

<input type="text" ng-model="searchText">
<table>
  <thead>
    <th ng-click="sortBy('timestamp')">Time Stamp</th>
    <th ng-click="sortBy('Action')">Action</th>
    <th ng-click="sortBy('AO')">AO</th>
  </thead>
  <tr ng-repeat="item in logs | orderBy:sortField:reverseOrder| filter:searchText">
      <td>{{item.timestamp | date :'MM/dd/yyyy HH:MM'}}</td>
      <td>{{item.Action}}</td>
      <td>{{item.AO}}</td>
  </tr>
</table>

Надеюсь, это очистит вас от недоразумений.