如何使用Controller操作在AngularJS中设置表单字段的值

Question

如何通过控制器的操作手动设置表单字段的值？在我的情况下,我有一个大约10个字段的表格.一个表单字段是一个日期字段,它有一个按钮,用于将其值设置为当前日期,我通过服务获取该日期.我试过操纵嵌套的范围值,但无济于事.问题是在设置日期字段的值之后,其他表单字段/范围值的值将被销毁.为了说明问题,请参阅下面的JSfiddle和代码.

JSFiddle来说明问题

<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';
}