如何将 2 个模型绑定到 Angular 中的一个输入字段？答案

【问题标题】：How to bind 2 models to one input field in Angular?如何将 2 个模型绑定到 Angular 中的一个输入字段？
【发布时间】：2012-12-03 03:24:56
【问题描述】：

我是否可以将两个模型值绑定到一个输入字段？

假设我有一个输入字段，我想成为范围内两个变量的值，例如：

<input type="text" model="sn_number; id" >

【问题讨论】：

答案是否定的。但更多信息会很有用，因此我们可以提供建议。

标签： angularjs

【解决方案1】：

你不能，但有一些解决方法。

1。使用 ngChange 更新其他模型

<input type="text" 
       ng-model="sn_number" 
       ng-change="id=sn_number"/>

2。你可以观察一个模型，当有变化时，更新另一个

$scope.$watch('sn_number', function(v){
  $scope.id = v;
});

如果您想保持同步，您还需要注意 id 中的更改。

Example here

【讨论】：

仅供参考：这是因为ng-model 具有prio 1，而ng-change 具有prio 0（从Angular 1.5 开始），因此首先被调用

【解决方案2】：

您可以立即绑定字段，不仅在 ng-change 中，而且实际上它不是数据绑定，它唯一的角度表达式

  <label>Name</label>
  <input type="text" ng-model="name" value="{{name}}"/>

  <label>Key</label>
  <input type="text" ng-model="key" value="{{key=name}}" />

【讨论】：

它实际上对我有用，但你能解释一下它为什么有效吗？为什么只使用 value ="{{name}}" 不起作用？
节省我写大量 $watch 的时间 :)

【解决方案3】：

将输入绑定到模型中的两个变量是没有意义的。绑定是双向的，所以如果模型更新，字段也会更新，反之亦然。如果您要绑定到两个变量，那么唯一的事实来源是什么？

但是您可以使用 ng-change 调用控制器上的方法，该方法可以在字段更改时设置两个变量。

【讨论】：

【解决方案4】：

使用 ng-init

<div ng-controller="ctrl" ng-init="model = { year: '2013', month:'09'}">

或

<div ng-repeat="c in contact" ng-init="likes = { food: 'steak', drink:'coke'}">

【讨论】：

"ngInit 唯一合适的用途是为 ngRepeat 的特殊属性设置别名"docs.angularjs.org/api/ng/directive/ngInit