AngularJs中的多個$插值符號

我對AngularJs頗爲陌生，但我對使用多個插值符號的更復雜的條件模板有特殊需求。我使用與https://docs.angularjs.org/api/ng/service/ $ interpolate相同的示例。

我需要這樣的東西：

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

這應該被理解爲一個多條件模板，展示了第一個片段，如果$ scope.greeting和$ scope.name定義，第二個如果只有$ scope.name被定義，否則第三個。

這個想法是，在符號[[]]之間的碎片。符號使用帶有AllOrNothing的標準插值符號進行插值，從左到右進行，直到第一個成功，並確保最後一個成功。

我知道，這可以用的東西做類似

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

但這種方法非常繁瑣，需要確定哪些複雜的布爾表達式可確保只有一個跨度顯示，並增加了雜散跨度只是因爲你需要一個ng-if指令的地方纔能訪問DOM。

謝謝你提供的所有建議。

來源

2014-05-16 Almotasim

您可以編寫自己的過濾器來專門處理這種情況。如果你想要一些更可重用的東西，關於條件輸出，你可以做一種三元過濾器。 Here's one稱爲iif（如此命名，以防止EVAL錯誤，我們會得到，如果我們把它叫做只是if）：

.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'}}

依此類推。

來源

2014-05-16 01:49:44 HackedByChinese

插補器應該能夠處理它。

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

來源

2014-10-06 17:33:01 Phil

AngularJs中的多個$插值符號

回答

相關問題