How can I concatenate two variables, containing integers, with angularjs?

Question

In my html I am trying to do the following

{{firstvar + secondvar | myFilter}}

However inside my filter it is only getting the second variable here. How can I concat these two variable to be sent to the filter?

UPDATE

This is weird, if I add an empty string to the middle it works,

{{firstvar + "" + secondvar | myFilter}}

Though it seems there should be a better solution

Answer 1

I have a hunch that this isn't working for you because you are using numbers here instead of strings. The angular {{...}} syntax allows us to describe a JavaScript expression we want evaluated when angular digests the DOM. The key here is that angular is evaluating the expression using (nearly) the same rules that would be used in a plain old JavaScript expression. You can see the caveats to this rule here.

To illustrate this point, let's imagine:

var firstvar = 1;
var secondvar = 2;

Now, considering the values we just assigned to firstvar and secondvar, what would we expect the value in result in the following expression to be?

var result = firstvar + secondvar

Well, since we know these are both numbers, the obvious answer is that result equals 3 (1 + 2 = 3, amazing!).

The point here is that when the JavaScript engine evaluates {{ firstvar + secondvar | myFilter }} it sees two numbers, not two strings. So using the + operator will cause an addition not a string concatenation.

As far as why you aren't getting the correctly evaluated expression value inside your filter, I am not sure. From my quick testing, and from skimming through the angular documentation, I can't find a reason why you are having this issue. The syntax for using a filter is:

{{ expression | filter }}

So any valid JavaScript expression (that follows Angular's rules) should work. In other words, the expression you posted above is perfectly valid. In fact, in my own plunker, I created a similar situation to what you described and I am not seeing any issues. It is evaluating the expression as expected, and I see the correct value in myFilter: example plunker.

The reason the concatenation is working when you use the expression {{ firstvar + "" + secondvar | myFilter }} is because your "" expression is creating an empty string object. When the JavaScript engine sees + in conjunction with this new string object, it attempts to serialize firstvar and secondvar (in other words turn them into strings). This results in what I would imagine was your original intent, that is to concatenate the serialized values of firstvar and secondvar. In my view this is a completely valid way of causing a string concatenation, as the result is equivalent to calling the toString() method for each variable. If you prefer, you could also call the toString() method for each variable directly like so:

{{ firstvar.toString() + secondvar.toString() | myFilter }}

This is essentially equivalent, except that you are avoiding the unnecessary creation of the empty string object.

So, in short, you can use either of these two expression to achieve a string concatenation:

{{ firstvar + "" + secondvar | myFilter }}
{{ firstvar.toString() + secondvar.toString | myFilter }}

Of course, this is all assuming that you are using a type other than string (in which case no serialization would be necessary, it's already a string!) Anyway, hope this clears some things up.

Answer 2

Have you already tried this

{{(firstvar + secondvar) | myFilter}}

?

I would do it myself, but I don't have an AngularJS environment available right now, sry.