AngularJS berechnet zwei dynamische Werte aus einem Array

Question

Ich bin neu in der Webentwicklung, und ich stieß auf ein Problem mit Arrays in AngularJS.

Ich habe eine ng-repeat Sequenz. In dieser Sequenz befinden sich zwei Schieberegler, die aufgrund von ng-repeat immer wieder wiederholt werden.

Die entsprechende HTML-Snippet sieht wie folgt aus:

<h1>INDEX = {{index}}</h1> 
    <div ng-repeat="alert in alerts"> 
     <rzslider rz-slider-model="alert.value" 
       rz-slider-options="alert.options"></rzslider> 
    <br> 
    <br> 
    <div> 
     <h4>{{alert.weighttitle}}</h4> 
     <div> 
     <md-slider flex md-discrete ng-model="alert.weight" step="1" min="1" max="100" aria-label="rating"></md-slider> 
     </div> 
    </div> 
    </div> 

Bedenkt man, dass alles, was alle Links und Scripts enthalten sind und die Steuerung richtig eingestellt ist.

Der obige Code funktioniert wie folgt zusammen:

• Es zeigt einen $ scope.index vom AngularJS Controller.
• Es werden zwei verschiedene Schieberegler angezeigt, die durch ein Array mit der Bezeichnung Alerts iterieren. Von dort braucht es einige Werte.

Das interessante Schnipsel des Controllers sieht wie folgt aus:

$scope.alerts = [ 
    { id: 1, 
    title: 'title1', 
    weighttitle: 'weighttitle1', 
    value: 1, 
    weight: 10, 
    options: { 
     showTicks: true, 
     hidePointerLabels: true, 
     hideLimitLabels: true, 
     stepsArray: [ 
     { value: 1, legend: '<10' }, 
     { value: 2, legend: '<50' }, 
     { value: 3, legend: '<250' }, 
     { value: 4, legend: '<500' }, 
     { value: 5, legend: '>500' } 

     ] 
    } 
    }, 
    { id: 2, 
    title: 'title2', 
    weighttitle: 'weighttitle2', 
    value: 5, 
    weight: 1, 
    options: { 
     showTicks: true, 
     hidePointerLabels: true, 
     hideLimitLabels: true, 
     stepsArray: [ 
     { value: 1, legend: '<2Mio' }, 
     { value: 2, legend: '<10Mio' }, 
     { value: 3, legend: '<50Mio' }, 
     { value: 4, legend: '<100Mio' }, 
     { value: 5, legend: '>100Mio' } 

     ] 
    } 
    }, 
    { id: 3, 
    title: 'title3', 
    weighttitle: 'weighttitle3', 
    value: 1, 
    weight: 1, 
    options: { 
     showTicks: true, 
     hidePointerLabels: true, 
     hideLimitLabels: true, 
     stepsArray: [ 
     { value: 1, legend: '<5%' }, 
     { value: 2, legend: '<10%' }, 
     { value: 3, legend: '<15%' }, 
     { value: 4, legend: '<20%' }, 
     { value: 5, legend: '>20%' } 

     ] 
    } 
    }, 
    { id: 4, 
    title: 'title4', 
    weighttitle: 'weighttitle4', 
    value: 3, 
    weight: 69, 
    options: { 
     showTicks: true, 
     hidePointerLabels: true, 
     hideLimitLabels: true, 
     stepsArray: [ 
     { value: 1, legend: '<5' }, 
     { value: 2, legend: '<10' }, 
     { value: 3, legend: '<15' }, 
     { value: 4, legend: '<20' }, 
     { value: 5, legend: '>20' } 

     ] 
    } 
    }, 
]; 

Die obige Snippet Teil einer Steuerung, die korrekt im HTML enthalten ist und daher arbeitet.

Meine Frage ist nun, wie kann ich ein $scope.index so hoch, dass es jedes value wird immer und jedes weight aus dem Array und multipliziert die Werte entsprechend wie value * weight. Es ist zu beachten, dass ein Nutzer diesen Wert ändern, kann die Manipulation des Schiebers durch eine Änderung, die auf die spezifische Variable im Array entspricht

ich so den $ Uhr Befehl versucht:

$scope.$watch('alerts', function(newValue, oldValue){ 
    $scope.index = oldValue + (newValue.weight * newValue.value); 
}, true); 

Aber es funktioniert nicht.

Answer 1

Sie können $scope.$watch verwenden und auf Änderungen warten, und wenn Änderungen eingetreten sind, können Sie die Ansicht aktualisieren. Sie können auch versuchen, die Funktion ng-change="update(alert)" zu verwenden und den Wert an die Funktion zu übergeben.