Value change range slider HTML5 and ng-repeat AngularJs

Question

I'm using a HTML5 range slider to set a value (status) and send it to a db. The problem I'm having now is that when I reload the page the slider and it's value are always set on '50'. The slider is generated inside an ng-repeat from angularjs. When I change the value in the db I see that the 'value' from the slider is changing, but nothing happens with the gui...

Can someone help me with this issue? Thanks in advance...

<h3 style="text-align: center">{{dim1}}</h3>
<input ng-model="dim1" ng-touchend="dim_switch(node, dim1)" ng-mouseup="dim_switch(node, dim1)" id="dimslider" value="{{parseInt(node.status)}}" type="range" step="1" min="0" max="100">

Use localStorage to set the value and get back same value on reload the application — Rohìt Jíndal
– Rohìt Jíndal, Commented May 29, 2017 at 8:19
parseInt() won't evaluate in angular expression, move it to some controller method and call method from UI. — anoop
– anoop, Commented May 29, 2017 at 8:20
@anoop - Call it from ngChange ? Tried that approach but it gave me errors and called the function several times, even when there were no changes... — Alex Logist
– Alex Logist, Commented May 29, 2017 at 8:24
@RohitJindal It should work realtime and not only on reload (i check db data every ... second and push changed values to the ngrepeat) — Alex Logist
– Alex Logist, Commented May 29, 2017 at 8:25
When I remove the ng-model from the input tag it works on page reload... But still not realtime -> i have made also buttons from simple input buttons and those work realtime — Alex Logist
– Alex Logist, Commented May 29, 2017 at 8:31

anoop · Accepted Answer · 2017-05-29 08:56:24Z

1

Since ng-repeat creates a new child scope.(doc.).

hence your $soppe.dim1 gets overidden by the new child scope. So wrap your property by hierarchical model to leverage javascript prototypical inheritance., and persist your $scope property.

like $scope.slider = {dim1 : ''} and use it in HTML like : {{slider.dim1}}.

further : parseInt() won't evaluate in angular expression, move it to some controller method.

Like: ng-value="someMethod(node.status)" and from controller method return parseInt(statusParam)

edited May 29, 2017 at 8:56

answered May 29, 2017 at 8:45

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Logist Over a year ago

I think I understand what you mean, but i have a lot of elements in my ng-repeat... + The parseInt i removed by using an int value in my database and not a string anymore...

anoop Over a year ago

@AlexLogist: then add some sliderValue variable in your ng-repeat dataArray, like ng-repeat = "data in dataArray" and in html {{data.sliderValue}}.

Alex Logist Over a year ago

Still not updating the Gui

anoop Over a year ago

@AlexLogist: please create some plunker\fiddle to reproduce issue, or update mine link

Alex Logist · Accepted Answer · 2017-05-29 11:28:30Z

0

Seems that the HTML5 range slider does not use the "value" attribute -> problem solved with a combination of the given solution !

answered May 29, 2017 at 11:28

Alex Logist

4110 bronze badges

Collectives™ on Stack Overflow

Value change range slider HTML5 and ng-repeat AngularJs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related