Как реорганизовать эту таблицу объектов для сортировки?

0

Здесь основы того, что в настоящее время написано:

$scope.data = {};
var data = $http.get(array of objects from server);
for (var i = 0; i<data.length; i++) {
  $scope.data[data[i]._id] = data[i];
}

то я строю таблицу данных, например:

<table>
    <tr>
        <th>Time</th>
        <th>Activity</th>
        <th>Location</th>
        <th>Customer</th>
        <th>Completed</th>
    </tr>
    <tr ng-repeat="item in data">
        <td>{{ data.timestamp }}</td>
        <td>{{ data.activity }}</td>
        <td>{{ data.location }}</td>
        <td>{{ data.customer }}</td>
        <td><button ng-click="completeAction(data._id)">Complete</button></td>
    </tr>
</table>

И затем в completeAction он отправляет на сервер, что идентификатор завершен, и когда он получает статус 200 из поста, он делает:

delete $scope.data[id];

Все это работает отлично, но я хотел бы иметь возможность сортировать данные в таблице определенным образом; сначала по активности, затем по времени. Я нашел фрагмент кода из https://github.com/Teun/thenBy.js, который позволяет мне сортировать массив данных с сервера просто отлично, но, очевидно, это не работает для $ scope.data, поскольку он скорее чем массив.

Поэтому я попытался преобразовать $ scope.data в массив и сделать что-то вроде этого:

$scope.data = [];
var data = $http.get(array of objects from server);
var s = firstBy("activity")
        .thenBy("time");
data.sort(s);
for (var i = 0; i<data.length; i++) {
  var found = false;
  for (var j = 0; j<$scope.data.length; j++) {
    if ($scope.data[j]._id == data[i]._id)
      found = true;
  }
  if (!found) 
    $scope.data.push(data[i]);
}

Это тоже работает. Мой стол отсортирован так, как я хочу его сейчас. Затем возникает проблема: я не знаю, как удалить вещи из области $, когда я нажимаю кнопку. С тех пор, как раньше я мог просто получить доступ к объекту, чтобы удалить его по id, я не уверен, что лучший способ сделать это сейчас. Плюс я чувствую, что там должен быть лучший способ сделать все то, что я сделал до сих пор. Я не просто разработчик javascript: P

Надеюсь, я объяснил, что я имею в виду. Если нет, просто дайте мне знать, и я могу попытаться быть более конкретным. Спасибо за любую помощь!

изменить ответ на вопрос:

function completeAction(id) {
  $http.post(post to server with item id saying that it has been completed)
       .then(function(response) {
          if (response.status == 200) {
             delete $scope.data[id];
          }
       })
}
Теги:

1 ответ

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

Вы можете выполнить такую же сортировку, используя угловой фильтр orderBy которому вы можете передать string или массив string по которой вы хотите отсортировать коллекцию. Также используйте в as filteredData filterData после фильтрации, где filterData будет иметь отсортированную коллекцию объектов. Чтобы вы могли получить доступ к своему контроллеру, выполнив $scope.filteredData.

<tr ng-repeat="item in data | orderBy: ['activity', 'time'] as filteredData">

Имейте в виду, что при увеличении коллекции с использованием фильтра уровня просмотра может повлиять производительность. Я бы сказал, что попробуйте использовать его внутри контроллера, его коллекция больше, чем $filter('orderBy')($scope.data, ['activity', 'time'])


Обновить

Всегда лучше обновлять данные. Я бы сказал, а не обрабатывал состояние коллекции на стороне клиента, после выполнения действия вы должны сделать еще один вызов ajax сразу после того, как будет сохранена согласованность данных приложения.

  • 0
    Хм, plnkr.co/edit/kBYR4cQHYRJpjsQ8raEv?p=preview Когда это выполняется, он выдает ошибки о том, что $ scope.friends не является массивом. Поэтому, если мне нужно сначала преобразовать объект в массив или не использовать orderBy, я все еще не уверен, как получить правильный объект для удаления из $ scope, когда я закончу.
  • 0
    @Keirathi Теперь я немного запутался, почему вы держите friends = {} (объект) и $scope.friends = friends элемент один за другим, а не делаете $scope.friends = friends и тогда orderBy будет происходить непосредственно при просмотре, вот plunkr в действии
Показать ещё 8 комментариев

Ещё вопросы

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