My goal is to dynamically calculate and display values based on two other variables in real time.
I've successfully managed to track one variable, but not both simultaneously.
$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);
}
});
}
In the first function (slider), I establish $scope.priceselected. The second function adds elements to $scope.companydata.selectedoffer.
Below is the corresponding 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 calculation of $scope.finalprice now updates when elements are added or removed from $scope.companydata.selectedoffer, but not when adjusting the slider (which changes the value of $scope.priceselected)
What am I overlooking?