2016-09-10 3 views
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]; 

Это все работает отлично, но я хотел, чтобы иметь возможность сортировать данные в тыс e таблица конкретным способом; сначала по активности, затем по времени. Я нашел фрагмент кода от 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

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

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

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


Update

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

+0

Хм, https://plnkr.co/edit/kBYR4cQHYRJpjsQ8raEv?p=preview Когда это работает, он бросает ошибки около $ scope.friends не является массивом.Поэтому, если мне нужно преобразовать объект в массив, сначала используйте orderBy, тогда я все еще не уверен, как получить правильный, чтобы удалить из области $, когда я закончу. – Keirathi

+0

@ Keirathi Я немного смущен, почему вы держите 'friends = {}' (объект) и толкаете элемент один за другим, а скорее '$ scope.friends = friends', а затем' orderBy' будет отображаться непосредственно, здесь [plunkr in action] (https://plnkr.co/edit/WXExWWBmXpkckUXOF4vO?p=preview) –

+0

Правильно, я это знаю. Так оно и было написано в документации по угловому заказу. Проблема в том, что я пытаюсь поместить его в свой код. Если я просто подключу '| orderBy etc 'в мой код, он не работает с моей $ scope.data в объекте. Если я сохраняю $ scope.data как массив вместо объекта, я не могу понять, как удалить вещи из $ scope.data, когда я нажимаю кнопку completeAction. – Keirathi

Смежные вопросы