Wie funktioniert angulars $ watch funktionieren mit Schieberegler

Question

alle. Ich bin neu in der Webentwicklung und habe ein Problem festgestellt. Ich habe es schließlich geschafft, eine Geige meines Problems zu schaffen, um genauer zu werden.

Mein Problem ist, dass ich 2 Slider habe. Ein Slider ist für einen Wert und ein anderer für das Gewicht verantwortlich. Diese Schieberegler werden mit der ng-Repeat-Funktion n-mal wiederholt. In der Geige nur zwei Mal, zu Demonstrationszwecken.

Ich möchte einen Index berechnen, die der folgenden Formel besteht:

Value1*Weight1+Value2*Weight2 

Der Index mit der Funktion reduzieren berechnet wird. Das Problem ist: Der Indexwert wird nicht aktualisiert, wenn sich die Wertänderung aufgrund des Schiebereglers ändert Ich bin mir ziemlich sicher, dass es mit der $ watch Funktion funktionieren sollte, aber ich habe leider keine Ahnung, wie das zu handhaben ist.

Wenn jemand so nett sein und mir Hilfe geben könnte.

Die js fiddle ist unten verlinkt.

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

Answer 1

Sie Ihren Code mit etwas Refactoring könnte wie folgt aus:

$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

Wenn Sie den Index-Eigenschaft auf Ihrem Umfang auf Änderungen an den Warnungen basierend aktualisieren möchten, sollten Sie eine tiefe Uhr auf Warnungen tun:

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