AngularJ中的多个$interpolation符号

Question

我是AngularJs的新手，但我特别需要一个更复杂的、使用多个插值符号的条件模板。我使用的示例与https://docs.angularjs.org/api/ng/service/$interpolate中的示例相同。

我需要像这样的东西：

[[ {{greeting}}, {{name}} || Hello, {{name}} || Hello, stranger ]]

这应该解释为多条件模板，如果同时定义了$scope.greeting和$scope.name，则显示第一个片段，如果只定义了$scope.name，则显示第二个片段，否则显示第三个片段。

其思想是，在symbols []中，||符号之间的片段使用AllOrNothing的标准插值符号进行插值，从左到右进行，直到第一个成功，并确保最后一个总是成功。

我知道这可以用下面这样的东西来完成

<span ng-if='greeting && name">{{greeting}}{{name}}</span>
<span ng-if='name && !greeting">Hello, {{name}}</span>
<span ng-if='!name">Hello, stranger</span>

但是这个解决方案非常麻烦，需要确定哪组复杂的布尔表达式确保只显示一个跨度，并向DOM添加虚假跨度，因为您需要为ng-if指令留出一个位置。

谢谢你的所有建议。

Answer 1

您可以编写自己的过滤器来专门处理这种情况。如果你想要一些更可重用的东西，关于条件输出，你可以做一个三元过滤器。Here's one调用了iif (这样命名是为了防止如果我们只称它为if会出现eval错误)：

.filter('iif', function() {
  // usage: {{ conditionToTest | iif:truevalue:falseValue }}
  // example: {{ iAmTrue | iif:'I am true':'I am false' }}
  return function(input, trueValue, falseValue) {
      return input ? trueValue : falseValue;
  };
})

在您的示例中如下所示：

{{greeting | iif:greeting:'Hello'}}, {{name | iif:name:'stranger'}}

如果太过冗长，您当然可以进一步专门化：

.filter('valueOrDefault', function() {
    return function(input, defaultValue) {
        return input || defaultValue;
    };
})

然后，您的模板如下所示：

{{ greeting | valueOrDefault:'Hello' }}, {{name | valueOrDefault: 'stranger'}}

诸若此类。

Answer 2

内插器应该能够处理它。

<p>{{ greeting || 'Hello' }}, {{ name || 'Stranger' }}.</p>