Zmienić wartość modelu na podstawie innych wartości?

Question

Mam model z wieloma wartościami, które są powiązane z pola wejściowe. Chciałbym zaktualizować inne atrybuty tego modelu, gdy tylko niektóre z tych atrybutów ulegną zmianie. tutaj jest przykład:

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

Chciałbym zaktualizować atrybut ceny, gdy pojawi się zmiana w polu godzin lub stawek. Jak mogę to zrobić?

Answer 1

Twórz wyrażenia zegarka na zmiennych. Naturalnym miejscem do tego jest w sterowniku - coś jak:

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

Inną możliwością jest użycie dyrektywy ngChange na polach wejściowych:

$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

Alternatywnie, można zdefiniować price jako obliczania albo w znaczniku, albo w twoim obiekcie. Zaletą tego jest to, że nie wymaga żadnych zegarków i prawdopodobnie jeśli przesyłasz je na serwer zaplecza, prawdopodobnie powinieneś go przeliczyć, biorąc pod uwagę, że użytkownik może manipulować nim przed przesłaniem.

Demo: http://plnkr.co/edit/wyiKlybVh94Fr3BDiYiZ?p=preview

Kontroler:

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

Następnie:

<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

i alternatywnie można użyć ng-change (przykład w kątowym 1,5 komponentu)

Kontroler:

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

Znacznik:

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

ten jest użyteczny, gdy obliczona wartość części jednostki, które muszą być przekazywane za pośrednictwem połączenia wholely odpoczynek.