如何在AngularJS同一控制器中将同一数据存储到多个$scope变量

你当前的写法存在一个典型的JavaScript引用类型陷阱——因为对象是按引用传递的，你把result.data同时赋值给model.edit和model.show，本质上这两个变量指向的是同一个内存对象。也就是说，当你修改model.edit里的属性时，model.show的对应值也会跟着变化，完全达不到“一个用于编辑、一个保留原始值展示”的预期效果。

下面给你两种可行的解决方案，根据你的数据结构选择：

方案一：使用AngularJS内置的深拷贝方法（推荐） #

AngularJS提供了angular.copy()方法，专门用来创建对象的深拷贝，不管数据有没有嵌套都能完美处理，而且不会丢失特殊类型（比如日期对象）：

app.controller('ClientsCtrl', function ($scope, $http) {
    $scope.model = {};
    $http.get("client/getdata", {})
        .then(function (result) {
            // 给edit和show分别创建独立的数据副本
            $scope.model.edit = angular.copy(result.data);
            $scope.model.show = angular.copy(result.data);
        }, function (error) {
            // 建议添加错误处理，方便调试和用户提示
            console.error('数据加载失败:', error);
        });
});

方案二：JSON序列化深拷贝（适合无特殊类型的数据） #

如果你的数据里没有函数、日期、正则这类特殊类型，也可以用JSON的序列化/反序列化来创建深拷贝，这是原生JS的方法，不需要依赖Angular的API：

app.controller('ClientsCtrl', function ($scope, $http) {
    $scope.model = {};
    $http.get("client/getdata", {})
        .then(function (result) {
            const rawData = result.data;
            $scope.model.edit = JSON.parse(JSON.stringify(rawData));
            $scope.model.show = JSON.parse(JSON.stringify(rawData));
        }, function (error) {
            console.error('数据加载失败:', error);
        });
});

额外小技巧 #

如果只需要保留一份原始数据用于展示，也可以先把原始数据赋值给model.show，再给model.edit创建副本，这样能减少一次拷贝操作：

$scope.model.show = result.data;
$scope.model.edit = angular.copy($scope.model.show);

这样处理后，model.edit和model.show就是两个完全独立的对象了，修改编辑变量时，展示变量会始终保持原始数据状态，完全符合你的需求。

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