AngularJs의 여러 $ 보간 기호

Question

저는 AngularJs에 대해 다소 새로운 편이지만 여러 보간 기호를 사용하는보다 복잡한 조건부 템플릿이 필요합니다. https://docs.angularjs.org/api/ng/service/ $ interpolate와 같은 예제를 사용하고 있습니다. 이것은 $의 scope.greeting 모두가 scope.name 정의 $ 경우, 최초의 단편을 보여주는 여러 조건 템플릿으로 해석 두 번째 단지 $ 경우되어야한다

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

:

내가 좋아하는 뭔가가 필요 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에 추가 할 수 있습니다.

당신이 제안 할 수있는 모든 것을 제공해 주셔서 감사합니다.

Answer 1

이 상황을 특별히 처리 할 필터를 직접 작성할 수 있습니다. 조건부 출력과 관련하여 좀 더 재사용 가능한 것을 원하면 일종의 3 중 필터를 만들 수 있습니다.

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

당신은 확실히를 전문으로 할 수 있습니다

.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; 
    }; 
}) 

이 예에서이처럼 사용 Here's one (우리는 그것을 단지 if라고하면 우리가 얻을 것이라고 평가 오류를 방지하기 위해 같은 이름) ​​iif라고 또한, 그것은 너무 자세한 인 경우 :

가

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

그런 다음 템플릿을 보이는 같은 :

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

등등.

Answer 2

인터폴 레이터가이를 처리 할 수 ​​있어야합니다.

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