Question

在我的html中，我尝试执行以下操作

{{firstvar + secondvar | myFilter}}

然而，在我的过滤器中，它只是在这里得到第二个变量。如何将这两个变量连接起来发送到过滤器？

更新

这很奇怪，如果我在它的中间添加一个空字符串，

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

虽然看起来应该有更好的解决方案

Answer 1

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

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

var firstvar = 1;
var secondvar = 2;

现在，考虑我们刚刚分配给firstvar和secondvar的值，我们对下面表达式result中的值有什么期望？

var result = firstvar + secondvar

好吧，因为我们知道这些都是数字，显而易见的答案是result等于3（1 + 2 = 3，太棒了！）。

这里的要点是，当JavaScript引擎评估{{ firstvar + secondvar | myFilter }}时，它会看到两个数字，而不是两个字符串。因此，使用+运算符会导致添加而不是字符串连接。

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

{{ expression | filter }}

因此任何有效的JavaScript表达式（在Angular＆＃39; s 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 }}

当然，这都假设你使用的是string以外的类型（在这种情况下，不需要序列化，它已经是一个字符串！）无论如何，希望这能清除一些东西起来。

Answer 2

你有没有试过这个

{{(firstvar + secondvar) | myFilter}}

我会自己做，但我现在没有AngularJS环境，sry。

Answer 3

尝试$parent.$eval(firstvar+secondvar)

Answer 4

这对我有用

<p> {{(firstvar| myFilter) + (secondvar | myFilter)}}</p>

我认为您应该在正确的位置使用括号。

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

4 个答案: