在沒有頁面刷新的情況下更新ui-grid中的單元格數據

Question

我有一張使用ui-grid製作的表格。該表顯示有關新聞報道列表的信息。在最後一欄中，我給了用戶編輯，刪除和/或製作新聞故事的能力。

一切似乎都正常工作 - 我能夠有一個模式彈出，並輸入所需的信息後，我可以看到我的數據在服務器上的變化。如果我刷新頁面，我還可以在桌面上看到我的數據更改。但是，我希望單元格數據在不刷新頁面的情況下更改。它似乎沒有約束我的新聞數據。

這裏是UI格：

$scope.news = getAdminNews.results; 


    /** 
    * ui-grid implementation 
    */ 
    $scope.gridOptions = { 
     data: 'news', 
     enableColumnResizing: true, 
     enableFiltering: true, 
     enableGridMenu: false, 
     enableColumnMenus: false, 
     paginationPageSizes: [25,50,75], 
     paginationPageSize: 25, 
     rowHeight: 75 
    }; 

    $scope.gridOptions.columnDefs = [{ 
     displayName: 'Title', 
     field: 'title.rendered', 
     filterCellFiltered: true, 
     sortCellFiltered: true, 
     width: '20%' 
     }, { 
     displayName: 'Body', 
     field: 'body', 
     width: '20%' 
     }, { 
     displayName: 'Created', 
     field: 'created', 
     type: 'date', 
     cellFilter: 'date:"yyyy-MM-dd"', 
     filterCellFiltered: true, 
     sortCellFiltered: true, 
     width: '20%', 
     sort: { 
      priority: 0 
     } 
     }, 
     { 
     displayName: 'Actions', 
     displayName: 'Actions', 
     width: '20%', 
     enableSorting: false, 
     enableFiltering: false, 
     field: 'actions', 
     cellTemplate: 'table-cell-actions' 
     } 
    ]; 

    $scope.gridOptions.onRegisterApi = function(gridApi) { 
     $scope.gridApi = gridApi; 
    }; 

我的控制器的一個組成部分，其成功的工作：

$scope.newPost = function() { 
     ngDialog.openConfirm({ 
     template: 'modalPostNew', 
     className: 'ngdialog-theme-default', 
     scope: $scope 
     }).then(function() { 
      var newPost = { 
      "id": 0, 
      "title": $scope.newPostForm.title 
      } 
      AdminNews.save(newPost); 
      toaster.pop('success', 'Updated', 'News item updated successfully.'); 
     }); 
    } 

Answer 1

我需要更新我的$ scope.news數據UI網格正在填充桌子。這裏是我的控制器現在的樣子：

$scope.newPost = function() { 
     ngDialog.openConfirm({ 
     template: 'modalPostNew', 
     className: 'ngdialog-theme-default', 
     scope: $scope 
     }).then(function() { 
      var newPost = { 
      "id": 0, 
      "title": $scope.newPostForm.title 
      } 
      AdminNews.save(newPost).$promise.then(function(response) { 
      var myObj = { 
       "id": response.data.id, 
       "title": { 
       "rendered": response.data.title 
       } 
      } 
      $scope.news.push(myObj); 
      }); 
      toaster.pop('success', 'Updated', 'News item updated successfully.'); 
     }); 
    }