如何在添加数据后自动刷新Angular UI Grid？

咱们先梳理下现有代码里的几个小问题，再一步步修改实现Grid自动刷新的效果：

1. 先修复通用函数工厂（CommonFunctionFactory）的参数问题 #

你当前的AddMasterData方法没正确传递回调函数，而且postApiCall的参数存在未定义变量，先修正这部分：

var appService = angular.module('appHome');
appService.factory('CommonFunctionFactory', ['MetadataOrgFactory', function (MetadataOrgFactory) {
    var dataFactory = {};

    //Adding Master Data to DB
    dataFactory.AddMasterData = function (objData, successCallback, errorCallback) {
        // 替换成你实际的添加分类API路径，比如'addcategory'
        MetadataOrgFactory.postApiCall('addcategory', objData, function (dataSuccess) {
            alert("The request has been completed succesfully");
            // 执行控制器传入的成功回调
            if (successCallback) successCallback(dataSuccess);
        }, function (dataError) {
            if (errorCallback) errorCallback(dataError);
        });
    };

    return dataFactory; // 别忘了返回工厂对象，否则无法被注入使用
}])

这里重点注意：

• 给AddMasterData补上successCallback和errorCallback参数，让控制器能收到添加完成的通知
• 修正postApiCall的参数：第一个是实际的添加接口路径，第二个是传入的objData（替换原来未定义的objMasterData）

2. 在控制器的Add方法中更新Grid数据 #

有两种方式实现刷新，选适合你的场景即可：

方式一：添加成功后重新拉取所有分类数据（稳妥，保证和数据库完全同步） #

这种方式适合需要确保Grid数据和后端完全一致的场景：

$scope.Add = function () {
    var objCategory = {
        'CategoryName': $scope.md_catname,
    };
    CommonFunctionFactory.AddMasterData(objCategory, 
        function (dataSuccess) {
            // 添加成功后，重新调用获取分类的接口刷新数据
            MetadataOrgFactory.getApiCall('getallcatgories', function (dataSuccess) {
                $scope.categoryData = dataSuccess;
                // 可选：清空输入框提升用户体验
                $scope.md_catname = '';
            }, function (dataError) {
                alert('重新加载数据失败');
            });
        }, 
        function (dataError) {
            alert('添加分类失败');
        });
}

方式二：直接将新对象推入现有数组（性能更好，适合确认添加成功无需同步其他修改的场景） #

如果你的后端接口在添加成功后会返回完整的新分类对象（包含ID等字段），可以直接把它加到categoryData数组里，UI-Grid会自动感知数组变化并刷新：

$scope.Add = function () {
    var objCategory = {
        'CategoryName': $scope.md_catname,
    };
    CommonFunctionFactory.AddMasterData(objCategory, 
        function (newCategory) {
            // 假设接口返回了新创建的分类对象，直接push到数组
            $scope.categoryData.push(newCategory);
            // 清空输入框
            $scope.md_catname = '';
        }, 
        function (dataError) {
            alert('添加分类失败');
        });
}

额外提醒 #

• 确保MetadataOrgFactory的postApiCall方法能正确处理HTTP请求，返回的响应数据格式符合预期
• 如果用方式二，要确认后端返回的新分类对象包含Grid列定义里的所有字段，避免显示异常

修改完成后，点击Add按钮完成数据库添加操作，UI-Grid就会自动刷新显示新数据了。

内容的提问来源于stack exchange，提问作者simple user