Значение столбца не отображается в сетке ng (ui)

Question

Значение столбца не отображается в сетке ng (ui)

0

У меня есть угловая 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"}

                        ];  
            }

Однако сетка создается без. строк, как в результате, и просто показывает заголовки столбцов, но я не нахожу ни в каких данных.

Что я здесь делаю неправильно?

ТИА!

NetTechie 26 июнь 2015, в 11:21

Источник

Теги:

angularjs

pouchdb

angular-ui-grid

6 ответов

Ещё вопросы

michelem · Answer 1 · 2015-06-26T08-04-00.000Z

Попытайтесь применить область действия после получения результатов, но должно быть лучше, если вы объявите свою 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"}            
    ]; 
}

Angel Paraskov · Answer 2 · 2015-06-26T07-47-00.000Z

Запрос в базу данных браузера является асинхронным. Как вы видите, вы используете обещания.

И ваше назначение todo для данных сетки сразу же после объявления вызова в базе данных браузера.

Пожалуйста, переместите это назначение внутри функции then или объявите другое и выполните следующие шаги.

Удачи

Я переместил код привязки сетки в другую функцию, но все еще та же проблема ... Однако я подозреваю, что объект привязки является сложным (я приложил скриншот в исходном вопросе), поэтому он не является обязательным ...
Ну, я понятия не имею, как вы определили свой Angular сервис, так что это может быть проблемой. Пожалуйста, проверьте это также.

user902490 · Answer 3 · 2015-11-24T18-26-00.000Z

Я знаю, что очень поздно ответить.

<div id="grid1" ui-grid="{ data: todo }"></div>

Это должно сделать трюк. Меня устраивает.

vvardhanz · Answer 4 · 2015-08-13T22-35-00.000Z

Вы также можете попробовать это.

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"
        }];
    };
};

Muharrem ünlü · Answer 5 · 2015-08-13T06-06-00.000Z

Функция 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');
                }); 
        }

vvardhanz · Answer 6 · 2015-08-13T22-11-00.000Z

Я не знаю, хорошо ли это сделать, но попробуйте.

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);