Angular-Translate：将冒号/字符添加到已翻译的字符串中

Question

我使用angular-translate，例如我有这个翻译：

'INFO_TEXT': 'My translation'

我可以通过以下方式将其包含在我的模板中：

<li translate='INFO_TEXT'></li>
<li>{{'INFO_TEXT' | translate}}</li>

所以我会得到这样的结果：

<li>My translation</li>

但我想要的是翻译后跟冒号：

<li>My translation:</li>

那我该怎么做呢？如何在已翻译的字符串中添加字符？我不想将冒号添加到翻译中，因为我认为它不应该存在，所以我会更灵活，我可以不使用冒号或使用冒号。

我当然可以做某事。像这样

<li>{{'INFO_TEXT' | translate}}:</li>

但是我想避免使用大括号的版本，因为性能原因如果它没有加载/评估，你会看到第二个{{'INFO_TEXT | translate'}}，这不是很好。

Answer 1

我用CSS做了这个：

.colon-suffix:after {
  content: ":";
}

<li translate="INFO_TEXT" class="colon-suffix"></li>

作为额外的奖励，当使用:after伪类时，冒号将出现在从右到左语言的正确一侧。

Answer 2

您可以像这样创建自定义过滤器：

app.filter('translate', function(){
  return function(text){
      return text + ':';
  }
});

Demo