angularjs - 如何将一个“模型”映射到两个字段？

Question

我有一个具有“高度”属性的模型，我希望允许用户将其编辑为两个单独的字段，“英尺”和“英寸”，但让它们映射到以英寸为单位的单个属性“高度”。

表单如下所示：

在这些字段和单个“高度”属性之间创建双向绑定的最佳方法是什么？

Answer 1

我稍微修改了@Mark 的例子，去掉了$watch，我认为它是多余的

HTML

<input type="number" ng-model="calc.feet">
<input type="number" ng-model="calc.inches">
<br>{{calc.height()}}

控制器

$scope.calc = {
  feet: 2,
  inches: 5,
  height: function () { return this.feet * 12 + this.inches }
};

Plunkr

Answer 2

HTML：

<input type="number" ng-model="feet">
<input type="number" ng-model="inches">
<br>{{height}}

控制器：

$scope.feet = 2;
$scope.inches = 5;
$scope.$watch('feet * 12 + inches', function(value){
  $scope.height = value;
})

PLNKR