Vitaliy Semyanchuk2014-07-22 20:23:00
Vitaliy Semyanchuk, 2014-07-22 20:23:00

Angular - how to change ng-model via controller?

Good afternoon.
There are applications written in Angular, it has two fields input type="range" and input type="number" so that when you click on input type="number" the slider changes ( input type="range" ). Solved this problem like this

<div ng-app ng-controller="Ctrl">
    Range: <input type="range" ng-model="i" min="0" max="5" step=".5" /><br />
           <br />
    Number: <input type="number" ng-model="i" min="0" max="5" /><br />
    <br />
    i: {{i}}

An example here is jsfiddle.net/VFyFv
Well, my task has become more complicated, I use the fabricjs canvas library, and I need to change the slider when the object size changes ( input type="range" ) and because of this I cannot use the example above, because I can't put ng-model="i" on an object.
So the question is, can I change the slider without using ng-model, for example, something like this
function Ctrl($scope) {
        $scope.i = $("input[type=number]").val();

But this code unfortunately does not work.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
sasha, 2014-07-22

Angular is such a bastard that he does not know about any asynchronous calls to anything if he did not make these calls himself.

        $scope.i = $("input[type=number]").val();

this code makes an asynchronous call to jquery. and when he does it, then the angular does not know that the scope has been changed. try something like this
$scope.someShitChange = function(){...}

Sergey, 2014-07-22
Protko @Fesor

Tell me, why do you need AngularJS? Or was the project inherited?
The controller communicates with the views through $scope, this is essentially the abstraction level. Models and controllers don't know anything about how your view is rendered, they just provide data. But directives are more interesting - they can work with the DOM and encapsulate some kind of logic. For example, in my example, for the range input, a value is taken and converted to a number (it's not clear why this is not there out of the box ... well, that's not the point).
More details can be found in the documentation. I advise you to say goodbye to my example and realize everything that happens there.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question