CODEWITHSUNDEEP
javascriptangularjshtmlrange
Alex Logist
Alex Logist

Reputation: 41

Value change range slider HTML5 and ng-repeat AngularJs

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">

Upvotes: 0

Views: 434

Answers (2)

Alex Logist
Alex Logist

Reputation: 41

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

Upvotes: 0

anoop
anoop

Reputation: 3822

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)

Upvotes: 1

Related Questions