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

在第一个函数（滑块）上，我定义了$ 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.finalprice的值，但是当我移动滑块时（因此更改$ scope.priceselected的值

我错过了什么？

Answer 1

您不需要watch来分配新值。而是使用角度双向绑定。

现在，如果您的color_slider_bar.onEnd()工作正常，则只需删除watch功能，因为新值会自动绑定，您的代码也能正常运行。

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

希望它有所帮助。

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

1 个答案: