javascript - ng-model 和值组合不适用于输入文本框

Question

我有两个输入文本框。我需要合并在两个文本框中输入的值并在第三个文本框中显示。如果我只使用第三个文本框中的 value，我就可以显示它。

方框 1:

 <input type="text" ng-model="entity.name">

方框 2:

 <input type="text" ng-model="entity.code">

方框 3:方框 1+方框 2

  <input type="text" value="{{entity.name+ ' + ' + entity.code}}">

但是，如果我在第三个框中使用模型名称，逻辑似乎不起作用:

 <input type="text" value="{{entity.name+ ' + ' + entity.code}}" 
        ng-model="entity.fullCode">

任何人都可以提出修复建议吗？？

Answer 1

这是一个很好的问题，因为它说明了不正确的“Angular 思维”会如何导致问题。

使用 Angular，您首先从模型开始。然后 View 绑定(bind)到模型并反射(reflect)它 - 而不是相反。我的意思是 ng-value 不会设置模型，尽管它会改变 View 。您(或者更确切地说， Controller )负责设置模型。

因此，如果您需要 entity.fullCode 等于 entity.name 和 entity.code 的串联，那么您应该设置它在 Controller 中。

例如，如果您想在 entity.name 或 entity.code 更改时设置它，那么您可以使用 $watch:

$scope.$watch("entity.name + entity.code", function(newVal){
   $scope.entity.fullCode = $scope.entity.name + "+" + $scope.entity.code;
})

但是请注意，由于您将 entity.fullCode 绑定(bind)到另一个输入，因此更改该输入会更改 entity.fullCode 并且不会使其等于 + 前两个。