angular ng-model 在提交后更新父对象并保持边界

Question

我上面有一个表单和一个显示字段。我只想在提交后更新显示值。这适用于第一次提交。在我提交之前，值不会改变，一旦我点击收集它更新值，然后，似乎 ng-model 以某种方式绑定并保持对上层对象的限制，因为当我继续在输入字段上输入值更新时自动地。对我来说这是一种奇怪的行为，我希望它们仅在我提交后才更新。有什么想法吗？

这是代码：

function Ctrl($scope) {
    $scope.customFields = ["Age", "Weight", "Ethnicity"];
    $scope.person = {
        customfields: {
            "Age": 0,
                "Weight": 0,
                "Ethnicity": 0
        }
    };
    $scope.submited = {
     "person" : {
           "customfields" : {
             "Age" : 0,
                "Weight" : 0,
                "Ethnicity" : 0
             }
         }
    };

    $scope.collectData = function () {
        $scope.submited.person.customfields = $scope.person.customfields;
        console.log($scope.person.customfields);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Ctrl">
    <div ng-repeat="fields in submited.person.customfields">
    {{fields}}
    </div>
    <div class="control-group" ng-repeat="field in customFields">
        <label class="control-label">{{field}}</label>
        <div class="controls">
            <input type="text" ng-model="person.customfields[field]" />
        </div>
    </div>
    <button ng-click="collectData()">Collect</button>
</div>

Answer 1

更改此行

$scope.submited.person.customfields = $scope.person.customfields;

至

$scope.submited.person.customfields = angular.copy($scope.person.customfields);

Answer 2

当您使用时：

$scope.submited.person.customfields = $scope.person.customfields;

变量成为彼此的克隆 - 它是 JS 中的属性。因此，当您使用该对象进行绑定时，值会保持绑定状态。你基本上只是为一个已经存在的对象创建另一个引用。

angular.copy 仅将对象的结构和数据复制到另一个对象上。因此，克隆发生而不是创建对象的引用。

因此，将其更改为：

$scope.submited.person.customfields = angular.copy($scope.person.customfields);

angular ng-model 在提交后更新父对象并保持边界

angular ng-model updates parent object after submission and stay bounded

angularjs

angularjs-ng-model