angularjs - 1 つの「モデル」を 2 つのフィールドにマップする方法は?

Question

ユーザーが「フィート」と「インチ」の 2 つの個別のフィールドとして編集できるようにする「高さ」プロパティを持つモデルがありますが、インチで測定された単一のプロパティ「高さ」にマップします。

フォームは次のようになります。

これらのフィールドと単一の「高さ」プロパティとの間の双方向バインディングを作成する最良の方法は何ですか?

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 }
};

プランカー

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;
})

プランク