Modificare il valore del modello in base ad altri valori?

Question

Ho un modello con diversi valori legati ai campi di input. Vorrei aggiornare altri attributi di quel modello ogni volta che alcuni di questi attributi cambiano. ecco un esempio:

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

Vorrei aggiornare l'attributo del prezzo ogni volta che c'è un cambiamento nel campo delle ore o delle tariffe. Come posso realizzare questo?

Answer 1

Creare espressioni di controllo sulle variabili. Un luogo naturale per farlo è nel controller - qualcosa come:

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

Un'altra possibilità è quella di utilizzare la direttiva ngChange sui campi di input:

$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

In alternativa, è possibile definire price come un calcolo nel markup o sul tuo oggetto. Il vantaggio è che non richiede alcun orologio e presumibilmente se li invii a un server di back-end, probabilmente dovresti ricalcolarlo considerando che l'utente potrebbe manipolarlo prima di inviarlo.

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

Controller:

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

Poi:

<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

E in alternativa è possibile utilizzare ng-change (esempio in un 1.5 componente angolare):

Controller:

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> 

Questo è utile quando il valore calcolato è parte di un'entità che deve essere trasmesso wholely attraverso una chiamata REST.