ТЛ: дг
Как я могу заполнить ng-таблицу, включая фильтры "select", используя ajax/json?
Plunk, показывающий проблему: http://plnkr.co/Zn09LV
Деталь
Я пытаюсь справиться с AngualrJS и расширением ng-table, и хотя я могу получить несколько хороших таблиц с рабочими фильтрами и, например, когда я использую статические данные, определенные в javascript, - как только я получу попытку загрузить реальные данные в таблицу Я попал в ловушку.
Основная часть ng-таблицы заполняется правильно и до тех пор, пока я использую только текстовый фильтр, кажется, что все работает:
<td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
{{user.Name}}
</td>
Хорошо работает.
Однако, если я обновляю это, чтобы использовать фильтр select:
<td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'" filter-data="Names($column)">
{{user.Name}}
</td>
Я столкнулся с проблемой синхронизации, поскольку переменная имен всегда оценивается до того, как данные вернулись с сервера. (Возможно, varibale имен оценивается до отправки запроса на сервер.) Это означает, что я получаю пустой список для фильтра.
Как только данные вернутся с сервера - я не могу найти способ обновления фильтра выбора. Повторное выполнение кода, создающего список фильтров, изначально кажется неэффективным - я не уверен, как вызвать ng-таблицу для повторной проверки своих фильтров, чтобы обновленная переменная не читалась. Я также не могу определить способ отложить оценку переменной до завершения асинхронного вызова.
Для моего javascript я довольно часто использовал пример ajax-кода на странице ng-table GitHub и добавил к нему пример кода для фильтра select.
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: 0, // length of data
getData: function($defer, params) {
// ajax request to api
Api.get(params.url(), function(data) {
$timeout(function() {
// update table params
var orderedData = params.sorting ?
$filter('orderBy')(data.result, params.orderBy()) :
data.result;
orderedData = params.filter ?
$filter('filter')(orderedData, params.filter()) :
orderedData;
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve($scope.users);
}, 500);
});
}
});
var inArray = Array.prototype.indexOf ?
function (val, arr) {
return arr.indexOf(val)
} :
function (val, arr) {
var i = arr.length;
while (i--) {
if (arr[i] === val) return i;
}
return -1
};
$scope.names = function(column) {
var def = $q.defer(),
arr = [],
names = [];
angular.forEach(data, function(item){
if (inArray(item.name, arr) === -1) {
arr.push(item.name);
names.push({
'id': item.name,
'title': item.name
});
}
});
def.resolve(names);
return def;
};
Я пробовал несколько попыток добавить дополнительный $q.defer() и обернуть начальные данные, за которыми следует функция $scope.names, но мое понимание обещания и отсрочки недостаточно для того, чтобы получить все работает.
Есть несколько заметок о GitHub, которые указывают на то, что это ошибка в ng-таблице, но я не уверен, что этот случай или я просто делаю что-то глупое.
https://github.com/esvit/ng-table/issues/186
Указатели того, как правильно обрабатывать,
-Kaine -