从服务器更新后刷新ng-grid时的空白数据

时间:2014-02-28 01:38:50

标签: angularjs ng-grid

我想在编辑或刷新数据到数据库后刷新ng-grid的数据。我尝试了本页https://github.com/angular-ui/ng-grid/issues/39中提出的解决方案。控制台上没有显示错误,表明存在问题。然而,当它触发该功能时,我得到的是来自ng网格的空白数据,并且所有先前的数据都不再显示。我错过了什么?需要你的帮助。提前谢谢。

这是函数


    self.fetchDataCenter = function() {
        setTimeout(function(){  
            $http({
                url:'api/centers',
                type:'GET'})
                .success(function(dCenter) {
                    $scope.centers = dCenter;   
                    if (!$scope.$$phase) {
                        $scope.$apply();
                    }                   
                });         
        }, 3000);       
    };   

    $scope.mySelectionsCenters = [];

            $scope.gridCenters = { data: 'centers',
                           filterOptions: $scope.filterOptionsCenters,   
                           selectedItems: $scope.mySelectionsCenters,  
                           afterSelectionChange: function() {
                              $scope.itemsCC = $scope.mySelectionsCenters;
                           },
                           multiSelect: false,
                           columnDefs: [{field:'cost_center', displayName:'Cost Center'}] 
                        };  

1 个答案:

答案 0 :(得分:1)

经过3天的研究和测试,我终于能够让它发挥作用。我得到的一些例子要么已经过时,又导致错误被抛出控制台。这种方法适用于使用ng-grid的场景。

我把这个功能放在了控制器上。

$scope.refresh = function () {
    setTimeout(function(){  
        $http({
            url:'api/centers',
            method:'GET'})
            .success(function(data) {
                $scope.centers = data;
            });                           
    }, 100); 
};  

然后我必须调用函数来用数据填充ng-grid。

$scope.refresh();

如果要在更新数据库后调用刷新函数从模态刷新网格,则必须首先在模态配置中引用范围,方法是添加

scope: $scope

以下是范围的模态脚本:$ scope

$scope.openAddCenter = function (input) {
    $scope.input = input;
    var modalAddCenter = $modal.open({
      templateUrl: 'myModalAddCenter.html',
      controller: ModalAddCenterCtrl,
      scope: $scope,
      resolve: {
        '$modalAddCenter': function() { 
          return function() { 
            return modalAddCenter; } 
            },
        input: function() {
          return $scope.input;
            }
        }
    });

然后在你的模态控制器上,只需在对数据库进行必要的更新后放置$ scope.refresh()。这将触发重新加载数据并重新填充ng-grid,并显示新数据。

我希望这能帮助新手并节省宝贵的时间。