javascript - 使用 AngularJS 观察多个变量时重新计算变量

Question

我需要实时计算并显示一些依赖于其他 2 个变量的值。

我成功观看了其中一部，但没能同时观看两部。

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

在第一个函数( slider )上，我定义了 $scope.priceselected。第二个会将元素推送到 $scope.companydata.selectedoffer 中。

这里是 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>

现在，当我将元素推送到 $scope.companydata.selectedoffer 或从 $scope.companydata.selectedoffer 中取消推送时，会重新计算 $scope.finalprice 的值，但在移动 slider 时不会重新计算(因此会更改 $scope.priceselected 的值

我错过了什么？

Answer 1

您不需要watch来分配新值。请改用 Angular 双向绑定(bind)。

现在，如果您的 color_slider_bar.onEnd() 工作正常，那么只需删除 watch 函数，因为新值会自动绑定(bind)，并且您的代码将正常工作。

$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);
        }
    //});
}

希望有帮助。