6

入力フィールドに関連付けられたいくつかの値を持つモデルがあります。これらの属性の一部が変更されるたびに、そのモデルの他の属性を更新したいと思います。以下に例を示します。

<input type='number' name='hours' ng-model='project.hours' />
<input type='number' name='rate' ng-model='project.rate' />
<span>{{ project.price }}

営業時間または料金フィールドに変更があるたびに、価格属性を更新したいと考えています。どうすればこれを達成できますか?

4

3 に答える 3

11

変数にウォッチ式を作成します。これを行う自然な場所は、コントローラー内です。次のようなものです。

var updatePrice = function(){ 
  //you might have to do null checks on the scope variables
  $scope.project.price = $scope.project.hours * $scope.project.rate; 
}
$scope.$watch('project.hours',updatePrice);
$scope.$watch('project.rate',updatePrice);

別の可能性は、入力フィールドで ngChange ディレクティブを使用することです。

$scope.updatePrice = updatePrice;

<input type='number' name='hours' ng-model='project.hours' ng-change="updatePrice()" />
<input type='number' name='rate' ng-model='project.rate' ng-change="updatePrice()" />
于 2013-05-11T21:32:48.083 に答える
1

または、次のように使用することもできますng-change(angular 1.5 コンポーネントの例):

コントローラ：

self.setPrice = function() {
  self.project.price = self.project.hours * self.project.rate;
};

マークアップ:

<input type="number" name="hours" ng-model="$ctrl.project.hours" ng-change="$ctrl.setPrice()">
<input type="number" name="rate" ng-model="$ctrl.project.rate" ng-change="$ctrl.setPrice()">
<span>{{ $ctrl.project.price }}</span>

これは、計算された値が、REST 呼び出しを介して完全に渡す必要があるエンティティの一部である場合に役立ちます。

于 2016-10-03T15:16:41.377 に答える