Angularjs Input text appending number instead of adding it

Question

When user type in number then click on "+", it will append the count instead of perform addition for the counter.

But it is working fine when performing "-" or "+" action without key in number in the input box.

<div ng-app="myApp" ng-controller ="myCtrl">
  <span ng-click="count = count + 1">+</span>
  <input type="text" ng-model="count" valid-number>
  <span ng-click="count = count - 1"  ng-show="count > 0">-</span>
</div>

fiddle : http://jsfiddle.net/shenglim/Lyugypqk/4/

Anybody can help out on this? Thanks !

Karl Wong · Accepted Answer · 2015-10-28 03:25:03Z

1

simple example will work if uses ng-click="test()" and perform basic addition, if you need to retrieve from existing json which return string, Try to use parseInt() on the JSON object.

answered Oct 28, 2015 at 3:25

Karl Wong

6052 gold badges9 silver badges23 bronze badges

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

Comments

Phil · Accepted Answer · 2015-10-28 02:43:06Z

1

Try <input type="number">.

The data type for type="text" makes it a string and "1" + 1 = "11"

JSFiddle ~ http://jsfiddle.net/Lyugypqk/2/

answered Oct 28, 2015 at 2:43

Phil

166k25 gold badges265 silver badges269 bronze badges

3 Comments

Took Over a year ago

Hi Phil, The reason i put input type ="text" is to prevent user from input negative value by directive control. If type="number" user still able to input negative by click arrow down.

Phil Over a year ago

@Took then add min="0".

Took Over a year ago

Sorry that I didn't stated clearly in the question asked. I wanted to prevent negative and decimals from user.

Low Flying Pelican · Accepted Answer · 2015-10-28 03:01:34Z

1

Alternatively you can add two methods to increase and decrease the values into the controller and use them,

    $scope.increment = function(){
        $scope.count++;
    };

    $scope.decrement = function(){
        $scope.count--;
    };

    <span ng-click="increment()">+</span>
    <input type="text" ng-model="count" valid-number>
    <span ng-click="decrement()" ng-show="count > 0">-</span>

answered Oct 28, 2015 at 3:01

Low Flying Pelican

6,0621 gold badge36 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angularjs Input text appending number instead of adding it

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related