ng-model 和 value 组合不适用于输入文本框 [英] ng-model and value combination not working for input text box
问题描述
我有两个输入文本框.我需要组合在两个文本框中输入的值并将其显示在第三个文本框中.如果我只使用第三个文本框中的 value
,我就可以显示它.
I'm having two input text box.
I need to combine the values entered in two text boxes and display it in the third.
I'm able to display it if I use only the value
in the third text box.
框 1:
<input type="text" ng-model="entity.name">
方框 2:
<input type="text" ng-model="entity.code">
框 3:框 1+框 2
Box 3:Box1+Box 2
<input type="text" value="{{entity.name+ ' + ' + entity.code}}">
但是,如果我在第三个框中使用模型名称,则逻辑似乎不起作用:
However if I use a model name in the third box, the logic doesn't seem to be working:
<input type="text" value="{{entity.name+ ' + ' + entity.code}}"
ng-model="entity.fullCode">
任何人都可以建议修复吗??
Can anyone suggest a fix ??
推荐答案
这是一个很好的问题,因为它说明了不正确的在 Angular 中思考"是如何导致问题的.
This is a good question as it illustrates how incorrect "thinking in Angular" can lead to issues.
使用 Angular,您首先从模型开始.然后 View 绑定到模型并反映它 - 而不是相反.我的意思是 ng-value
不会设置模型,尽管它会改变视图.您(或者更确切地说,控制器)负责设置模型.
With Angular you start with model first. Then the View is bound to the model and reflects it - not the other way around. What I mean by that is that ng-value
would not set the model, although it would alter the view. You (or rather, the controller) is responsible for setting the model.
所以,如果你需要 entity.fullCode
等于 entity.name
和 entity.code
的串联,那么你应该设置它在控制器中.
So, if you need entity.fullCode
to equal the concatenation of entity.name
and entity.code
, then you should set it in the controller.
例如,如果您想在 entity.name
或 entity.code
更改时随时设置它,那么您可以使用 $watch代码>:
For example, if you wanted to set it any time entity.name
or entity.code
change, then you could do so with $watch
:
$scope.$watch("entity.name + entity.code", function(newVal){
$scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
})
但是请注意,由于您将 entity.fullCode
绑定到另一个输入,更改该输入将更改 entity.fullCode
并且不会使其等于 +
前两个.
Note, though, that since you are binding entity.fullCode
to another input, changing that input would change entity.fullCode
and would not make it equal to the +
of the first two.
这篇关于ng-model 和 value 组合不适用于输入文本框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!