change input number by user input not working

Question

Right now I have an input field:

<input type="number" ng-model="distance"></input>

In the JS I assign the distance to a value:

$scope.distance = 0;

I want this value to change when the user enters in a value and clicks a button. I have the button setup with my controller... But every time the button is clicked, it displays the value as 0.

Function when button is clicked:

//convert button function for when button is clicked
$scope.convert = function(myUnit, myUnit2, distance){
    alert(distance);
}

The button:

<button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, {{distance}})">
    Convert
</button>

Use convert(myUnit.thisunit, myUnit2.thisunit2, distance). You're already in an AngularJS expression, no need to add the braces {{…}}. — Blackhole
– Blackhole, Commented Feb 25, 2015 at 21:41

Pankaj Parkar · Accepted Answer · 2015-02-25 21:48:12Z

1

Change ng-click to this ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, distance)" because you were using {{distance}} interpolation directive inside ng-click directive that will never pass distance value

HTML

<button class="button button-block button-balanced" ng-click="convert(myUnit.thisunit, myUnit2.thisunit2, distance)">
    Convert
</button>

Hope this could help you, Thanks.

edited Feb 25, 2015 at 21:48

answered Feb 25, 2015 at 21:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

bvaughn · Accepted Answer · 2015-02-25 21:42:54Z

0

Depending on the structure of your HTML, (if you have an ngIf above your <input>) the distance model may not be trickling up to your controller.

You should probably nest it for safety, like so:

$scope.formData = {distance: 0};

And then:

<input type="number" ng-model="formData.distance"></input>

Also, your click-handler should just read from the $scope value as well:

$scope.clickHandler = function() {
    alert(formData.distance);
}

answered Feb 25, 2015 at 21:42

bvaughn

13.5k49 silver badges46 bronze badges

Collectives™ on Stack Overflow

change input number by user input not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related