Question

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

这是代码：

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);

角度ng-model在提交后更新父对象并保持有界

2 个答案: