Question

大家。我是Web开发的新手，遇到了一个问题。我终于设法创造了我的问题的小提琴，以便更具体。

我的问题是我有2个滑块。一个滑块负责一个值，另一个负责重量。使用ng-repeat功能重复这些滑块n次。在演示目的中只有两次小提琴。

我想计算一个由以下公式组成的指数：

Value1*Weight1+Value2*Weight2

使用reduce函数计算索引。 问题是：当由于滑块更改而导致值更改时索引值未更新 我很确定它应该与$ watch函数一起使用，但遗憾的是我不知道如何管理它。

如果有人可以这么善良并给我一些帮助。

js小提琴在下面链接。

https://jsfiddle.net/dkyun/dfx0grdr/

Answer 1

如果您想根据警报的更改更新范围的索引属性，您应该对警报进行深入监视：

$scope.$watch('alerts', function() {
    var index = $scope.alerts.reduce(function(prev, next) {
      return prev + (next.value*next.weight);  
    }, 0);

    $scope.index = index;
    console.log(index);
}, true);

Answer 2

您可以使用以下内容重构代码：

  $scope.index = 0;

  $scope.calcIndex = function(){
    return $scope.alerts.reduce(function(prev, next) {
      return prev + (next.value*next.weight);  
    }, 0);
  };

  $scope.$watch(function(){
    return $scope.calcIndex();
  }, function(newValue){
    $scope.index = newValue;
  });

CHECK THE DEMO FIDDLE

angulars $ watch功能如何与滑块一起使用

2 个答案: