In my search for a solution, I am looking to create a page filled with sliders that are generated using an ng-repeat loop through a JSON file. Each slider should display the current value it is set at, and an input field should show the calculated result by multiplying the slider's value with a specific grams value based on the selected unit.
If you'd like to see what I have so far, check out my Plunkr example which includes multiple sliders with different food values to choose from.
One issue I've encountered is with initializing the span displaying the output of each slider. When I set this initial value to 0 in the main controller, all sliders end up working together as one:
//assign initial values
$scope.demoVals = {};
$scope.demoVals.slider = 0;
If I remove those lines, each slider can be controlled independently once again.
To address this problem, I tried giving a unique identifier to each ng-model and ng-bind for every slider and its respective output. However, I'm curious if there is a better way to narrow down the scope so that initialization occurs individually for each ng-repeat item.
Another challenge I'm facing involves implementing a multiplication function on the output value. How can I send the selected grams unit (accessible in the template as {{ unit-grams }}) to the controller, and then return the resulting value as the input's value?
//calculate weight
$scope.$watch('demoVals.slider', function (newVal) {
if (typeof newVal !== 'undefined') {
$scope.calculated = newVal * 3.14159; //an arbitrary number representing the variable unit.grams
}
});