[英]One way data binding on 2 input fields
On my registration form, I have firstname , lastname , and displayname fields. 在我的注册表上,我有firstname , lastname和displayname字段。 When the firstname is updated, I want that value to reflect in the displayname field (should that field not already have a value).
更新姓氏时 ,我希望该值反映在displayname字段中(如果该字段尚未有值)。
I have set the update to occur on blur, and when I inspect the element directly for displayname , I see the value attribute set to the firstname value. 我将更新设置为在模糊时发生,当我直接检查元素的displayname时 ,我看到value属性设置为firstname值。 However, that doesn't appear to reflect on screen or in the model.
但是,这似乎并没有反映在屏幕上或模型中。 I am sure it's because that field is going off of
user.displayname
(which is initially empty). 我确定是因为该字段不属于
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/ JSFiddle: http : //jsfiddle.net/mbqs7xcj/
What am I missing or doing wrong? 我想念什么或做错什么? Thanks.
谢谢。
EDIT 编辑
One solution I came up with was $watch
ing for a change on the firstname
field, and then setting the displayname
accordingly if the value doesn't already exist. 我想出的一个解决方案是
$watch
firstname
字段的更改,然后如果该值尚不存在,则相应地设置displayname
。 However, I do not believe this to be the "solution" as I am sure there's a more efficient way of doing this. 但是,我不认为这是“解决方案”,因为我确信有更有效的方法可以做到这一点。
<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/ http://jsfiddle.net/mbqs7xcj/7/
remove ng-model
directive in input
display 在
input
显示中删除ng-model
指令
<input type="text" placeholder="Display" value="{{user.firstname}}"/>
if you are using ng-model
angular try to find the value of that model name, so textbox is not updating because there is no value for that model name user.displayname
. 如果您使用的是
ng-model
angular,请尝试查找该模型名称的值,因此不会更新文本框,因为该模型名称user.displayname
没有值。
another alternative coud be by triggering and watch mouse event on first input. 另一个替代方法是在第一个输入上触发并监视鼠标事件。
<input type="text" ng-model="user.firstname" ng-mouseleave="checkDisplayName($event)" />
http://jsfiddle.net/darul75/mbqs7xcj/9/ http://jsfiddle.net/darul75/mbqs7xcj/9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.