Recalculate variable while watching multiple variables with AngularJS

Question

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?

I think your approch to this simple task is wrong. Please show us the HTML code where it is being selected. — M. Junaid Salaat
– M. Junaid Salaat, Commented Aug 29, 2016 at 11:17

M. Junaid Salaat · Accepted Answer · 2016-08-29 11:24:53Z

1

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.

answered Aug 29, 2016 at 11:24

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Mitjans Over a year ago

It works! I also packed it into an external function, so I call it on push, unpush and slider functions. Thanks!

M. Junaid Salaat Over a year ago

Glad it helped. :)

Collectives™ on Stack Overflow

Recalculate variable while watching multiple variables with AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related