Model değerini diğer değerlere göre değiştirilsin mi?

Question

Giriş alanlarına bağlı çeşitli değerlere sahip bir modelim var. Bu özelliklerden bazıları değiştiğinde, bu modelin diğer özelliklerini güncellemek istiyorum. Ya saat veya oranlar alanında bir değişiklik olduğunda fiyat özelliği güncellemek istiyorum

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

: Burada bir örnektir. Bunu nasıl başarabilirim?

Answer 1

Değişkenler hakkında saat ifadeleri oluşturun. Bunu yapmanın doğal yer denetleyicisi olduğu - gibi bir şey:

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

başka olasılık giriş alanları üzerinde ngChange yönergesini kullanmaktır: Alternatif

$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

, bir hesaplama olarak price tanımlayabilir ya işaretlemede ya da nesnenizde. Bunun faydası, herhangi bir saat gerektirmez ve muhtemelen bir arka uç sunucusuna gönderirseniz, muhtemelen kullanıcı göndermeden önce işleme koyabileceğini düşünerek yeniden hesaplamalıdır.

Gösteri: http://plnkr.co/edit/wyiKlybVh94Fr3BDiYiZ?p=preview

Kontrol: O

$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

ve alternatif olarak (açısal 1.5 bileşen örneği) ng-change kullanabilir:

Kontrol:

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

Biçimlendirme:

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

hesaplanan değer REST çağrısı ile wholely iletilmesi gereken bir işletme parçası olduğunda bu yararlıdır.