Как работает функция углов $ watch с ползунком

Question

все. Я новичок в веб-разработке, и я столкнулся с проблемой. Наконец, мне удалось создать скрипку моей проблемы, чтобы получить более конкретную информацию.

Моя проблема в том, что у меня есть 2 слайдера. Один слайдер отвечает за значение, а другой за вес. Эти ползунки повторяются с n-повторной функцией n раз. В скрипке всего два раза, для демонстрационных целей.

Я хотел бы, чтобы вычислить индекс, который состоит из следующей формулы:

Value1*Weight1+Value2*Weight2 

Индекс рассчитывается с функцией уменьшения. Проблема: значение индекса не изменяется при изменении значения из-за изменений ползунка Я вполне уверен, что он должен работать с функцией $ watch, но я, к сожалению, не знаю, как это сделать.

Если кто-то может быть таким добрым и оказать мне некоторую помощь.

Сценарий js приведен ниже.

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

Answer 1

Вы можете реорганизовать свой код с чем-то как это:

$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

Answer 2

Если вы хотите, чтобы обновить свойство индекса на вашу сфере на основе изменений предупреждений, вы должны сделать глубокий часы на предупреждениях:

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