单向数据绑定2个输入字段

Question

在我的注册表单上，我有名字，姓氏和显示名称字段。更新名字后，我希望该值反映在 displayname 字段中（如果该字段尚未包含值）。

我已将更新设置为模糊，当我直接检查元素 displayname 时，我看到值属性设置为 firstname < / strong>价值。但是，这似乎并不反映在屏幕上或模型中。我确定这是因为该字段已经离开user.displayname（最初是空的）。

<div ng-app="myApp">
    <form ng-controller="RegisterCtrl">
        <input type="text" ng-model="user.firstname" placeholder="Firstname"  ng-model-options="{updateOn: 'blur'}"/>
        <input type="text" ng-model="user.lastname" placeholder="Lastname" />
        <input type="text" ng-model="user.displayname" placeholder="Display"  value="{{user.firstname}}"/>
    </form>
</div>

<script>
    var myApp = angular.module("myApp", []);

    myApp.controller("RegisterCtrl", ["$scope" ,function ($scope) {
        $scope.user = {};
    }]);
</script>

JSFiddle：http://jsfiddle.net/mbqs7xcj/

我错过了什么或做错了什么？感谢。

修改

我提出的一个解决方案是$watch在firstname字段上进行更改，然后相应地设置displayname，如果该值尚未存在。但是，我不认为这是＆＃34;解决方案＆＃34;因为我相信这是一种更有效的方法。

<script>
var myApp = angular.module("myApp", []);

myApp.controller("RegisterCtrl", ["$scope", function ($scope) {
    $scope.user = {
        firstname: "",
        lastname: "",
        displayname: "",
        email: "",
        password: ""
    };

    // Set the firstname as the display name if it's empty
    $scope.$watch("user.firstname", function () {
        if ($scope.user.displayname.length === 0) {
            $scope.user.displayname = $scope.user.firstname;
        }
    });
}]);
</script>

http://jsfiddle.net/mbqs7xcj/7/

Answer 1

删除ng-model显示

中的input指令

<input type="text"  placeholder="Display"  value="{{user.firstname}}"/>

这是Fiddle

如果您使用ng-model angular尝试查找该模型名称的值，则文本框不会更新，因为该模型名称user.displayname没有值。

Answer 2

另一种选择可以是通过在第一次输入时触发并观察鼠标事件。

<input type="text" ng-model="user.firstname" ng-mouseleave="checkDisplayName($event)" />

http://jsfiddle.net/darul75/mbqs7xcj/9/