Изменить значение модели на основе других значений?

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

Markup:

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

Это полезно, если вычисленное значение является частью объекта, который должен быть передан wholely через REST вызова.