0

I am working on a metronome and initially had a div set up with a value of 100:

<div ng-bind="currentBpm"></div>

In my controller I had the scope initially set:

$scope.currentBpm = 100;

I then also have a function that adjusts the tempo:

function adjustBpm(direction) {
    if (direction == false && $scope.currentBpm > 1) {
        $scope.currentBpm = $scope.currentBpm -1;
    } else if (direction == true && $scope.currentBpm < 999) {
        $scope.currentBpm = $scope.currentBpm +1;
    }

    console.log($scope.currentBpm);
}

This worked well, but I need to give the user the option of entering a value using the numeric keyboard.

Switching the div to a number input:

<input type="number" ng-model="currentBpm">

Allows the user to click the input and adjust the value, but the $scope is then not used. The function for adjusting the value still console logs the previous value and not that of the input. Im guessing ng-model moves away from the scope and creates 2 different values.

Is there any way to sync these up?

The adjustBpm function is called on a click of a + / - button.

<div ng-click="adjustBpm(false)"> + </div>
Lovelock
  • 7,689
  • 19
  • 86
  • 186
  • How and where you calling `adjustBpm`?Create plunker for it – RIYAJ KHAN Mar 06 '17 at 17:18
  • @RIYAJKHAN just updated the question and and Ill see what I can do. – Lovelock Mar 06 '17 at 17:23
  • @Lovelock Just to make sure. does the above code work if you use ' – Sagar Mar 06 '17 at 18:09
  • Possible duplicate of [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). Follow the rule of always adding a dot (`.`) to ng-models. – georgeawg Mar 06 '17 at 18:47

1 Answers1

0

You have to call ng-click and ng-keyup on the input :

<input type="number" ng-model="currentBpm" ng-click="adjustBpm(false)" ng-keyup="adjustBpm(false)">

Or as said @georgeawg you can use ng-change :

<input type="number" ng-model="currentBpm" ng-change="adjustBpm(false)">
Damien
  • 3,915
  • 1
  • 17
  • 18
  • 1
    The [ng-change directive](https://docs.angularjs.org/api/ng/directive/ngChange) would be more appropriate. – georgeawg Mar 06 '17 at 18:52