AngularJS' ng-click treats integer as a string

Question

I've got a simple upVote/downVote counter. It works great on the downvote, but when you click upvote it appends a 1 onto the end of the original upvote variable. (it Doesn't add, it Appends) but only for the upvote. Why is this and how can I fix it?

<span>
<a ng-click="upCount = upCount + 1" ng-init="upCount=location.upVoteCount" 
class="btn btn-success">{{upCount}}
</a>

<a ng-click="downCount = downCount - 1" ng-init="downCount=location.downVoteCount" 
class="btn btn-danger">{{downCount}}
</a>
</span>

Note: both location.upVoteCount and location.downVoteCount are defined as integers. They are populated using ng-repeat="location in locationList". So their values are not explicitly declared in the controller. Changing the + to a - works just fine, the add function also works if you replace location.upVoteCount (or location.downVoteCount) with a number.

Thanks for your help!

roland · Accepted Answer · 2014-01-23 18:42:26Z

3

+ means both "add" and "concatenate" while - means "minus".

Force the variables to operate in addition mode:

upCount = (parseInt(upCount) + 1)

answered Jan 23, 2014 at 18:42

roland

7,7956 gold badges48 silver badges62 bronze badges

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

1 Comment

Michael Romrell Over a year ago

I think you're on the right track here, but that resets the {{upCount}} value to 1 and then you can no longer continue to upvote. It stays at 1

dcodesmith · Accepted Answer · 2014-01-24 13:33:49Z

2

Try this

<a ng-click="upCount = upCount + 1" ng-init="upCount=parseInt(location.upVoteCount)" 
class="btn btn-success">{{upCount}}
</a>

<a ng-click="downCount = downCount - 1" ng-init="downCount=parseInt(location.downVoteCount)" 
class="btn btn-danger">{{downCount}}
</a>

Update

If your location.upVoteCount and location.downVoteCount variables aren't integers/numbers then this might be an issue.

Try parsing then first. See ng-init directive above.

edited Jan 24, 2014 at 13:33

answered Jan 23, 2014 at 18:41

dcodesmith

9,6244 gold badges38 silver badges40 bronze badges

4 Comments

Michael Romrell Over a year ago

Unfortunately this solution freezes the button, in other words, nothing happens when you upvote it or down vote it.

dcodesmith Over a year ago

of what type is $scope.upCount and $scope.downCount in your controller?

Michael Romrell Over a year ago

Neither upCount or downCount are used in the controller. they are just variables similar to what's used in the Angular example here: docs.angularjs.org/api/ng.directive:ngClick

dcodesmith Over a year ago

Then this will have to be an issue with your location.upVoteCount and location.downVoteCount.

Jeremy Likness · Accepted Answer · 2014-01-23 20:03:20Z

1

I'm not sure why you're having a problem unless the location entity has strings on it. I just did a quick fiddle and it works fine. Here's the HTML:

<div ng-app="myApp" ng-controller="myController">
    <span>
<a ng-click="upCount = upCount + 1" href="#" ng-init="upCount=location.upVoteCount">Up: {{upCount}}</a>
<a ng-click="downCount = downCount - 1" href="#" ng-init="downCount=location.downVoteCount">Down: {{downCount}}</a>
</span>
</div>

Here's the JavaScript:

var app = angular.module("myApp", []);

app.controller("myController", function($scope) {
    $scope.location = {
        upVoteCount: 0,
        downVoteCount: 0
    };
});

It works just fine up or down voting. Run it here:

http://jsfiddle.net/jeremylikness/bPQXJ/

answered Jan 23, 2014 at 20:03

Jeremy Likness

7,5311 gold badge25 silver badges25 bronze badges

5 Comments

Michael Romrell Over a year ago

That's strange. my location.upVoteCount and location.downVoteCount are both being pulled in using ng-repeat="location in locationList". So their values are not explicitly declare in the controller. Could that be part of the issue?

Jeremy Likness Over a year ago

Should be fine as long as the values on location in locationList are not strings. How is locationList being populated?

Michael Romrell Over a year ago

Ok I figure it out. I left some bit of old test code in the controller that used the upVoteCount variable. Once I deleted that everything worked just as it should. Thank you!

Fai Zal Dong Over a year ago

@JeremyLikness , just quick question. I saw your jsfiddle and it works fine. Just curios, if value for object upVoteCount: "0" String, can we convert the String value to int inside ng-click ? thanks!

Jeremy Likness Over a year ago

There is no int in JavaScript, but you can case to Number

Max · Accepted Answer · 2014-01-24 13:38:11Z

1

I'm not in a position to try it out right now, but how about:

ng-click="upCount = upCount - (-1)"

No + operators to confuse the expression evaluator

answered Jan 24, 2014 at 13:38

Max

2,1313 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

AngularJS' ng-click treats integer as a string

4 Answers 4

1 Comment

Update

4 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Update

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related