Eric Mitjans Eric Mitjans - 3 months ago 20
AngularJS Question

Recalculate variable while watching multiple variables with AngularJS

I need to calculate and show in real time some values that are dependant on 2 other variables.

I managed to watch one, but not both.

$scope.color_slider_bar = {
value:0,
minValue: 0,
maxValue: 100,
options: {
ceil: 100,
floor: 0,
translate: function (value) {
return value + ' CHF';
},
showSelectionBar: true,
getSelectionBarColor: function(value) {
if (value >= 0)
return '#00E3C6';
},
onEnd: function () {
$scope.priceselected = $scope.color_slider_bar.value;
console.log($scope.priceselected);
}
}
};

$scope.selectOffer = function(offer){
$scope.companydata.selectedoffer.push(offer)

$scope.$watch(['$scope.companydata.selectedoffer', '$scope.priceselected'], function() {
if ($scope.companydata.selectedoffer.length == 1){
$scope.finalprice = $scope.priceselected;
console.log($scope.finalprice);
}
else if ($scope.companydata.selectedoffer.length == 2){
$scope.finalprice = $scope.priceselected / 2;
console.log($scope.finalprice);
}
else if ($scope.companydata.selectedoffer.length == 3){
$scope.finalprice = $scope.priceselected / 3;
console.log($scope.finalprice);
}
});
}


On the first function (slider), I define $scope.priceselected.
The second will push elements into $scope.companydata.selectedoffer.

And here the HTML:

<div class="col-xs-12" ng-repeat="offer in offers" ng-class="{'selected': offer.chosen}">
<div class="worditem" ng-show="!offer.chosen" ng-click="selectOffer(offer)">
<div class="table">
<div class="table-cell numbers">
<div class="title">{{offer.name}}</div>
<div class="info">{{offer.info}} / {{offer.views}}</div>
<a data-toggle="modal" data-target="#{{offer.price}}">+ INFO</a>
</div>
</div>
</div>

<div class="worditem" ng-show="offer.chosen" ng-click="unselectOffer(offer)">
<div class="overlay-price">{{finalprice | number : 0}}<br>CHF</div>
<div class="table">
<div class="table-cell numbers">
<div class="title">{{offer.name}}</div>
<div class="info">{{offer.info}} / {{offer.views}}</div>
<a data-toggle="modal" data-target="#{{offer.price}}">+ INFO</a>
</div>
<div class="overlay" ng-show="offer.chosen">
</div>
</div>
</div>

</div>


The value of $scope.finalprice is now being recalculated when I push/unpush elements into and from $scope.companydata.selectedoffer, but not when I move the slider (therefore changing the value of $scope.priceselected

What am I missing?

Answer

You do not need the watch to assign the new values. Instead use the angular two-way binding.

Now if your color_slider_bar.onEnd() is working correctly then just remove the watch function because the new values are binded automatically and your code will work.

$scope.selectOffer = function(offer){
    $scope.companydata.selectedoffer.push(offer)

    //$scope.$watch(['$scope.companydata.selectedoffer', '$scope.priceselected'], function() {
        if ($scope.companydata.selectedoffer.length == 1){
            $scope.finalprice = $scope.priceselected;
            console.log($scope.finalprice);
        }
        else if ($scope.companydata.selectedoffer.length == 2){
            $scope.finalprice = $scope.priceselected / 2;
            console.log($scope.finalprice);
        }
        else if ($scope.companydata.selectedoffer.length == 3){
            $scope.finalprice = $scope.priceselected / 3;
            console.log($scope.finalprice);
        }
    //});
}

Hope it helps.

Comments