What is the relationship between Angular's $watch function and a slider component?

Question

What is the relationship between Angular's $watch function and a slider component?

Hello everyone! I am a beginner in the world of Web Development and I've run into an issue. Luckily, I was able to create a fiddle showcasing my problem for better understanding.

The challenge at hand involves two sliders: one for a value and another for weight. These sliders are repeated n times using the ng-repeat function - in the fiddle, I have demonstrated this setup with just two repetitions.

What I aim to achieve is calculating an index based on the following formula:

Value1*Weight1 + Value2*Weight2

The index calculation utilizes the reduce function. However, my predicament lies in the fact that the index value does not update when the slider values change. While I believe $watch might be the solution, I am unsure how to implement it.

If anyone could provide some guidance or assistance, I would greatly appreciate it.

You can access the js fiddle through the link below:

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

javascript angularjs slider angularjs-ng-repeat

Answer 1

Answer №1

To enhance your code, consider implementing the following approach:

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

VIEW THE LIVE DEMO

Answer 2

To enhance your code, consider implementing the following approach:

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

VIEW THE LIVE DEMO

Answer 3

Answer №2

To keep your scope's index property updated with changes in alerts, it is recommended to implement a deep watch on alerts:

$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 4

To keep your scope's index property updated with changes in alerts, it is recommended to implement a deep watch on alerts:

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

What is the relationship between Angular's $watch function and a slider component?

Answer №1

Answer №2

Similar questions

Is it better to dynamically generate HTML elements or to just directly paste complete fragments in the code?

Tips for eliminating duplicate values from an array of objects in JavaScript

How to use Javascript 'if statement' to check for a numerical value in a form field?

What is the best way to extract every nth digit from a number using a given reference point?

Transferring data between functional components in ReactJS and dealing with the output of [object Object] or undefined

Error: Typescript is not properly recognizing 'jasmine' methods

The issue arises when attempting to apply a filter to an array, as the variable returns as

Clearing hoverIntent using jQuery

breezejs: Non-scalar relationship properties cannot be modified (Many-to-many constraint)

Challenges surrounding jQuery's .before

Creating a program to ascertain whether two integers inputted by a user are odd numbers

Uncovering the key based on the value in MongoDB

Persistence of query parameters from old routes to new routes using vue-router

Angular Jasmine encountered an unexpected request error while using $location and $httpBackend

Steps for transferring data from a POST response to the client in NodeJS/ExpressJS

Tips for preventing click events from interfering with execution in React

Having trouble with input event listeners in JavaScript?

Mapping JSON data from an array with multiple properties

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Confirmation message is displayed upon clicking to delete a row in the editable Gridview, prompting the user to