在不刷新页面的情况下更新 ui-grid 中的单元格数据答案

【问题标题】：Updating cell data in ui-grid without page refresh在不刷新页面的情况下更新 ui-grid 中的单元格数据
【发布时间】：2015-08-29 01:57:12
【问题描述】：

我有一张使用 ui-grid 制作的表格。该表显示有关新闻报道列表的信息。在最后一栏中，我赋予用户编辑、删除和/或制作新闻故事的能力。

一切似乎都很好——我可以弹出一个模式，输入所需信息后，我可以在服务器上看到我的数据更改。如果我刷新页面，我还可以在表格上看到我的数据变化。但是，我希望在不刷新页面的情况下更改单元格数据。它似乎没有绑定到我的新闻数据。

这里是 ui-grid：

$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.');
      });
    }

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

我需要更新 ui-grid 用来填充表格的 $scope.news 数据。这是我的控制器现在的样子：

 $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.');
      });
    }

【讨论】：