My quest: a page of sliders, made with an ng-repeat through a JSON file. Spans showing the value of each slider. An input showing (value of the slider * a grams value per selected unit).
Here's my Plunkr with multiple sliders, each with a selection of 2 food values.
The span showing the output of the slider should initialise at 0. My first problem is, if I initialise it at 0 in the main controller as shown in a previous question, then this changes the scope of the slider demoVals.slider so that all sliders on the page now operate in unison:
//assign initial values
$scope.demoVals = {};
$scope.demoVals.slider = 0;
If you comment out those lines, each slider can now be operated individually again.
I thought I could solve this by assigning a unique identifier to the ng-model & ng-bind of each slider & its output, but is there a better way to limit the scope so that the initialisation is happening individually for each ng-repeat?
My next problem is trying to call a multiplication function on the value of the output: how can I pass the grams unit selected (accessible in the template as {{ unit-grams }}) to the controller, and have the result returned as the value of the input?
//calculate weight
$scope.$watch('demoVals.slider', function (newVal) {
if (typeof newVal !== 'undefined') {
$scope.calculated = newVal * 3.14159; //an arbitrary number that I want to be the variable unit.grams
}
});
