如何将两个包含整数的变量与angularjs连接起来？

{{firstvar + secondvar | myFilter}}

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

我有一种预感,这不适合你,因为你在这里使用数字而不是字符串. angular {{…}}语法允许我们描述角度摘要DOM时我们想要评估的JavaScript表达式.这里的关键是angular使用(几乎)与普通旧JavaScript表达式中使用的相同规则来评估表达式.您可以看到此规则 here的警告.

为了说明这一点,让我们想象一下：

var firstvar = 1;
var secondvar = 2;

现在,考虑到我们刚刚分配给firstvar和secondvar的值,我们期望下面的表达式中的值得到什么？

var result = firstvar secondvar

好吧,因为我们知道这些都是数字,显而易见的答案是结果等于3(1 2 = 3,太棒了！).

这里的重点是当JavaScript引擎评估{{firstvar secondvar | myFilter}}它看到两个数字,而不是两个字符串.因此,使用运算符将??导致添加而不是字符串连接.

至于为什么你没有在过滤器中获得正确评估的表达式值,我不确定.从我的快速测试,到浏览angular documentation,我找不到你遇到这个问题的原因.使用过滤器的语法是：

{{ expression | filter }}

所以任何有效的JavaScript表达式(在Angular的rules之后)都应该有效.换句话说,您在上面发布的表达式完全有效.事实上,在我自己的plunker中,我创建了与你描述的类似的情况,我没有看到任何问题.它正在按预期评估表达式,我在myFilter中看到了正确的值：example plunker.

当您使用表达式{{firstvar“”secondvar |时,串联工作的原因myFilter}}是因为你的“”表达式正在创建一个空字符串对象.当JavaScript引擎与此新字符串对象一起查看时,它会尝试序列化firstvar和secondvar(换句话说,将它们转换为字符串).这导致我想象的是你的原始意图,即连接firstvar和secondvar的序列化值.在我看来,这是一种导致字符串连接的完全有效的方法,因为结果相当于为每个变量调用toString()方法.如果您愿意,还可以直接为每个变量调用toString()方法,如下所示：

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

除了您避免不必要地创建空字符串对象之外,这基本上是等效的.

因此,简而言之,您可以使用这两个表达式中的任何一个来实现字符串连接：

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

当然,这都假设你使用的是字符串以外的类型(在这种情况下,不需要序列化,它已经是一个字符串了！)无论如何,希望这可以解决一些问题.