У меня есть угловая ui-сетка, как показано ниже в HTML
<div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
В JS я получаю данные из pouchdb и сохраняю результат на объект
function find_users_by_name(name) {
if( !name.id ) { // This is not a callback from 'db.change'
myId = name;
oldId = name;
}
else // This is called from db.change
myId = oldId;
db.query('idx/bypin', {
key: myId,
include_docs: true
}).then(function(result) {
$scope.todo = result.rows;
}).catch(function(err) {
// handle errors
alert('not found');
});
$scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
$scope.gridOptions.data = $scope.todo;
$scope.gridOptions.columnDefs = [
{name: 'Address1',field: "Address1"},
{name: 'Address2',field: "Address2"}
];
}
Однако сетка создается без. строк, как в результате, и просто показывает заголовки столбцов, но я не нахожу ни в каких данных.
Что я здесь делаю неправильно?
ТИА!
Попытайтесь применить область действия после получения результатов, но должно быть лучше, если вы объявите свою ng-сетку вне функции, которую вы используете для получения данных:
function MyCtrl($scope) {
function find_users_by_name(name) {
if( !name.id ) { // This is not a callback from 'db.change'
myId = name;
oldId = name;
}
else // This is called from db.change
myId = oldId;
db.query('idx/bypin', {
key: myId,
include_docs: true
}).then(function(result) {
$scope.todo = result.rows;
// DO THIS
if (!$scope.$$phase) {
$scope.$apply();
}
}).catch(function(err) {
// handle errors
alert('not found');
});
}
$scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
$scope.gridOptions.data = $scope.todo;
$scope.gridOptions.columnDefs = [
{name: 'Address1',field: "Address1"},
{name: 'Address2',field: "Address2"}
];
}
Запрос в базу данных браузера является асинхронным. Как вы видите, вы используете обещания.
И ваше назначение todo для данных сетки сразу же после объявления вызова в базе данных браузера.
Пожалуйста, переместите это назначение внутри функции then или объявите другое и выполните следующие шаги.
Удачи
Я знаю, что очень поздно ответить.
<div id="grid1" ui-grid="{ data: todo }"></div>
Это должно сделать трюк. Меня устраивает.
Вы также можете попробовать это.
function find_users_by_name (name) {
if (!name.id) { // This is not a callback from 'db.change'
myId = name;
oldId = name;
} else // This is called from db.change
myId = oldId;
db.query('idx/bypin', {
key: myId,
include_docs: true
}).then(function(result) {
$scope.todo = result.rows;
nowDoGridBinding();
}).catch(function(err) {
// handle errors
alert('not found');
});
$scope.gridOptions = {};
var nowDoGridBinding = function() {
$scope.gridOptions = {
enableSorting: true,
enableColumnResizing: true,
data: $scope.todo;
columnDefs: [{
name: 'Address1',
field: "Address1"
}, {
name: 'Address2',
field: "Address2"
}];
};
};
Функция db.query является асинхронной. вы должны назначить gridoption.data в функции db.query:
function find_users_by_name(name) {
if( !name.id ) { // This is not a callback from 'db.change'
myId = name;
oldId = name;
}
else // This is called from db.change
myId = oldId;
$scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
$scope.gridOptions.columnDefs = [
{name: 'Address1',field: "Address1"},
{name: 'Address2',field: "Address2"}
];
db.query('idx/bypin', {
key: myId,
include_docs: true
}).then(function(result) {
$scope.todo = result.rows;
$scope.gridOptions.data = $scope.todo;
}).catch(function(err) {
// handle errors
alert('not found');
});
}
Я не знаю, хорошо ли это сделать, но попробуйте.
function find_users_by_name (name) {
if( !name.id ) { // This is not a callback from 'db.change'
myId = name;
oldId = name;
}
else // This is called from db.change
myId = oldId;
db.query('idx/bypin', {
key: myId,
include_docs: true
}).then(function(result) {
$scope.todo = result.rows;
}).catch(function(err) {
// handle errors
alert('not found');
});
$scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
$scope.gridOptions.columnDefs = [
{name: 'Address1',field: "Address1"},
{name: 'Address2',field: "Address2"}
];
}
$timeout(function() {
$scope.gridOptions.data = $scope.todo;
//$scope.gridApi1.grid.refresh();
}, 800);