如何使用控制器动作在 AngularJS 中设置表单字段的值

Question

如何通过控制器的操作手动设置表单字段的值？就我而言，我有一个包含大约 10 个字段的表单。一个表单字段是一个日期字段，它有一个用于将其值设置为当前日期的按钮，我通过服务获取该日期。我尝试过操作嵌套范围值，但无济于事。问题是在设置日期字段的值后，其他表单字段/范围值的值被破坏。为了说明问题，请参见下面的 JSfiddle 和代码。

JSFiddle to illustrate problem

<div ng:app>
    <form name="myForm" ng-controller="Ctrl">Age:
        <input type="text" data-ng-model="person.age" />
        <br/>First Name:
        <input type="text" data-ng-model="person.first_name" />
        <button ng-click="setFirstName()" type="button">Set First Name</button>
        <br/>Last Name:
        <input type="text" data-ng-model="person.last_name" />
        <button ng-click="setLastName()" type="button">Set Last Name</button>
        <br/>
    </form>
</div>





function Ctrl($scope) {
    $scope.setFirstName = function () {
        $scope.person = {
            first_name: 'King'
        }
    };

    $scope.setLastName = function () {
        $scope.person = {
            last_name: 'Kong'
        }
    };
}

Answer 1

每次调用 set 方法时，都会覆盖整个 person 对象引用。请注意您每次如何创建一个新对象。您最有可能的意图是：

$scope.setFirstName = function(){
   $scope.person.first_name = 'King';
}