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

Accepted Answer

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.

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

Solution

Problem