Question

我在Angular中编写用户设置页面，用于更新用户个人资料设置。我就是这样做的（请原谅我使用jquery）

$scope.userObj = {};
var userObjTemp = {};
$http.get('/api/to/get/user').success(function(data) {
    if (data.success != true) {
        $state.go('index');
    } else {
        $scope.userObj.user = data.response; //scope variable to show in html form
        userObjTemp.user = data.response; //temp data in case someone cancels editing
        var tempDob = $scope.userObj.user.dob;
        $scope.userObj.user.dob = tempDob.split('-')[2] + '/' + tempDob.split('-')[1] + '/' + tempDob.split('-')[0];
        console.log({
            userObjData: $scope.userObj
        });
        console.log({
            tempData: userObjTemp
        });
    }
});
$scope.showSetting = function(target) {
    $('.setting-edit-row').hide();
    $('.jr-input-setting').show();
    $('#' + target + '-input').hide();
    $('#' + target).show();
}
$scope.saveSetting = function(key) {
    var postDict = {};
    postDict[key] = $scope.userObj.user[key];
    $http.put('/api/user', postDict).success(function(data) {
        $scope.userObj.user = data.response;
        $('.setting-edit-row').hide();
        $('.jr-input-setting').show();
    })
}
$scope.shutSetting = function(target) {
    $scope.userObj.user = {};
    $scope.userObj.user = userObjTemp.user;
    $('#' + target).hide();
    $('#' + target + '-input').show();
}

我的HTML如下：

<div class="row setting-fixed-row">
    <div class="col-lg-2">
        <div class="setting-label">
            Name
        </div>
    </div>
    <div class="col-lg-8">
        <input class="jr-input-setting" id="setting-name-input" disabled="true" ng-model="userObj.user.display_name" type="text" placeholder="Display Name">
    </div>
    <div class="col-lg-2">
        <div class="edit-btn" ng-click="showSetting('setting-name')">
            Edit
        </div>
    </div>
    <div class="col-lg-12 setting-edit-row" id="setting-name">
        <div class="row">
            <div class="col-lg-12">
                <span class="glyphicon glyphicon-remove shut-det" style="margin-bottom: 5px;" ng-click="shutSetting('setting-name')"></span>
            </div>
            <div class="col-lg-offset-2 col-lg-8">
                <input class="jr-input-edit" ng-model="userObj.user.display_name" placeholder="Display Name" id="display_name" ng-change="showVal()">
            </div>
            <div class="col-lg-2">
                <div class="save-settings" ng-click="saveSetting('display_name')">
                    Save
                </div>
            </div>
        </div>
    </div>
</div>

shutSetting()背后的想法是关闭编辑面板setting-edit-row并恢复我从api获得的原始数据。但是，当我这样做时，它显示临时变量与$scope.userObj变量相同。我添加了一个$scope.showVal函数来显示输入表单更改的变量：

$scope.showVal = function(){
    console.log({userObj: $scope.userObj});
    console.log({temp: userObjTemp});
}

出于某种原因，两个变量都在更新。我如何解决这个问题，因为我之前从未遇到过类似的事情。

Answer 1

问题是您引用对象而不是复制它们。因此

$scope.userObj.user = data.response;
userObjTemp.user = data.response;

指向同一个对象。然后，当您更新其中一个时，另一个会更新。

userObjTemp.user = angular.copy(data.response)

这是一份副本。

以防万一：https://jsfiddle.net/qzj0w2Lb/

Answer 2

问题是，两个变量都引用了同一个对象data.response。根据对象，您可以使用$.extend(true, {}, data.response);来获取对象的克隆。

请注意，当涉及自定义对象时，这不是真正的“深层复制”！

范围变量也在更改

2 个答案: