angular: how to update value when range input modified via code

Question

I'm pretty new to angularJS,

I have a range input, which might get it's value updated via code. I have created a ng-model for this input, and have ng-binded it to a <p> tag.

It works fine as long as the range input is modified by the user, but when it is updated by the code, the updated value is not getting reflected.

I have a created a fiddle: https://jsfiddle.net/cj1emb1r/16/

How can I make it work?

<div ng-app=''>
    <input type='range' min='20' max='200' ng-model="amount" id='slider'>
    <p ng-bind="amount"> </p>
    <button onclick='foo();'> Run!</button>
</div>

The function where the value is modified:

<script>
    var flag = true;
    function foo() {
        var sliderObj = document.getElementById('slider');
        var value = parseInt(sliderObj.value);
        if(value >= 200 || value <= 0) {
            flag = !flag;
        }
        if(flag) {
            sliderObj.value = value + 5;
        }
        else {
            sliderObj.value = value - 5;
        }
        console.log(value);
        setTimeout("foo()", 200);
    }
</script>`

GProst · Accepted Answer · 2017-01-15 16:30:06Z

For starters, I suggest you to read some articles in official developer guide documentation. And walk through tutorial, which is very useful for understanding Angular basics.

Back to your code, there are couple of fundamental things that you didn't get about Angular.js workflow. In order to control your model you should to use controllers. The amount variable that you're using as a model in slider ( via ng-model) is kept in $scope or in your case in $rootScope, I suppose (because there are no any controllers or directives/components in your app). So, if you want to change amount value manually, you have to actually change $rootScope.amount value. But without controller and dependency injection, that attached to it, you simply can't reach $rootScope variable.

So, first of all you better define your app module and then attach controller to it, so you can manage it's $scope.

Here is my example, how to do that (with comments).

But if to speak, it is recommended by style guide to keep variables not in $scope but in controller itself. Here is how to do that.

omer cohen · Accepted Answer · 2017-01-15 15:12:49Z

0

if i understand , you can call to foo

foo();

and by default set value

value = 155;

before you call foo function

answered Jan 15, 2017 at 15:12

omer cohen

2821 gold badge5 silver badges19 bronze badges

Comments

Ritik Saxena · Accepted Answer · 2017-01-15 15:26:08Z

0

Try this:

In your script, add -

var p = document.getElementsByTagName('p')[0];

after the inner if-else loop, add p.innerHTML=sliderObj.value;

Angularjs bindings can only be accessed inside angularjs controllers. Plain JavaScript doesn't recognize angularjs bindings. Hence, it doesn't change the value of p accordingly.

edited Jan 15, 2017 at 15:26

answered Jan 15, 2017 at 15:11

Ritik Saxena

7241 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

angular: how to update value when range input modified via code

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related