angularjs - 根据其他值更改模型值？

Question

我有一个模型，其中有几个值与输入字段相关联。每当其中一些属性发生变化时，我想更新该模型的其他属性。这是一个例子：

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

每当小时或费率字段发生变化时，我想更新价格属性。我怎样才能做到这一点？

Answer 1

在变量上创建监视表达式。执行此操作的自然位置是在控制器中 - 例如：

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()" />

Answer 2

或者，您可以price在标记或对象中定义为计算。这样做的好处是它不需要任何手表，并且大概如果您确实将这些提交到后端服务器，您可能应该重新计算它，因为用户可以在提交之前对其进行操作。

演示：http ://plnkr.co/edit/wyiKlybVh94Fr3BDiYiZ?p=preview

控制器：

 $scope.project = {
  hours: 100,
  rate: 25,
  price: function() {
    return this.hours * this.rate;
  }
};

然后：

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

Answer 3

或者，您可以使用ng-change（例如在角度 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 调用传递的实体的一部分时，这很有用。