Is it possible to add a integer to a scope variable?
e.g
<div style="top:{{top + 140}}px">....</div>
If top is 140 it should give me "280px" and not "140140px"
Is this possible?
2 Answers
Not that I think this is the best method, but you could try:
<div style="top:{{top * 1 + 140}}px">....</div>
To force top to become an integer.
4 Comments
Ben Lesh
+1 This will work, but in most cases it's probably better to ensure at the controller level that the value is an integer. It's the controller's job to mitigate that sort of thing, not the view's.
Marek123
Yes, it worked. How can I do that, that the controller send an integer?
Scott Sword
@Marek123 please see my answer below.
Mathew Berg
Can you post a jsfiddle of your code? I want to see how you create the top on your scope.
Regarding your response to @Mathew Berg:
The reason that you're running into this problem is because you are telling Angular that "top" is a string literal. While Mathew's method does the trick to interpret the value as an integer, it is still basically a workaround. @blesh is totally right in saying that you should be doing this at the controller level. So...
This
function myContoller($scope) {
$scope.top = '1';
}
<div style="top:{{top + 140}}px"></div>
<!-- Output = <div style="top:1140px"></div> -->
and this
function myContoller($scope) {
$scope.top = 'one';
}
<div style="top:{{top + 140}}px"></div>
<!-- Output = <div style="top:one140px"></div> -->
are handled in the same manner.
Basically you are inadvertiently concatenating instead of the intended arithmetic.
Forturnately the remedy is SUPER easy. All you need to do is remove the parenthesis from the integer that you are passing and then Angular will say "hey this is a number, lets do some math".
eg
function myController($scope) {
$scope.top = 140;
}
<div style="top:{{top + 140}}px"></div>
<!-- Output = <div style="280px"></div> -->
You stated "Top is in the $scope.dealer and I'm using an ng-repeat="d in dealer". so correctly it would be d.top" so you might have to tweak this a bit to access the proper scope, but the solution holds true nonetheless. One of the awesome things about Angular is that it can inherently handle expressions within it's markup syntax. Hopefully this will help explain what is causing your problem, because Angular DOES work the way you want it to, as it should. =)
topdefined somewhere?