표현식의 Angularjs if-then-else 생성


109

예를 들어 bool 값을 반환해야하는 $ scope.isExists (item) 함수가 있습니다. 이런 걸 원해요

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

문자열을 반환하는 함수를 사용할 수 있다는 것을 알고 있습니다. if-then-else 생성을 표현식에 사용할 수 있다는 점이 흥미 롭습니다. 감사.


3
체크 아웃ng-switch
NilsH 2013 년

3
1.2부터 이제 지원됩니다.
nilskp 2014 년

답변:


219

각도 표현식은 1.1.5 이전의 삼항 연산자를 지원하지 않지만 다음과 같이 에뮬레이션 할 수 있습니다.

condition && (answer if true) || (answer if false)

예를 들어 다음과 같이 작동합니다.

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

업데이트 : Angular 1.1.5는 삼항 연산자에 대한 지원을 추가했습니다.

{{myVar === "two" ? "it's true" : "it's false"}}

&&를 이스케이프해야합니까?
0xcaff 2014 년

@caffinatedmonkey 아니, 안돼. 프로젝트에서 가능한 경우 주제 질문에 대한 답변에서 설명한 것처럼 삼항 연산자를 사용할 수 있습니다.
Sebastian

무엇에 대한 @Sebastian <>비교 연산자로?
0xcaff 2014

@caffinatedmonkey 문제 없습니다. {{1> 0? true : false}} 또는 {{1> 0}} 무엇이든 상관 없습니다. {{1> 0}}은 1.0.8에서도 작동하지만 삼항 연산자는 작동하지 않습니다.
Sebastian

이것은 각도 UI 구성 요소의 설정 내에서 작동하기 때문에 여전히 훌륭한 대답입니다 (삼항 연산자는 어떤 이유로 작동하지 않습니다). 어쩌면이 설정 각도-UI 매개 변수에 어려움을 겪고있는 사람을 도움
올가 Gnatenko

39

이 작은 plunker (1.1.5의 예)에서 설명한 것처럼 버전 1.1.5 이상부터 삼항 연산자를 사용할 수 있습니다 .

역사상의 이유로 (아마도 plnkr.co는 미래에 어떤 이유로 다운 될 수 있음) 여기 내 예제의 주요 코드가 있습니다.

{{true?true:false}}

역사상의 이유로 (어쩌면 plnkr.co가 미래에 어떤 이유로 다운 될 수 있음) 여기에 내 예제의 주요 코드가 있습니다.{{true?true:false}}
Sebastian

1
정확히 제가 찾고 있던 것이 감사합니다. 거의 필터를 사용하여이 작업을 수행했습니다.
Immutable Brick

1
@IgorCh : 수락 된 답변을 업데이트하고 싶을 수도 있습니다. :)
Răzvan Flavius ​​Panda

25

다음과 같은 ng-show를 쉽게 사용할 수 있습니다.

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

더 복잡한 테스트의 경우 ng-switch 문을 사용할 수 있습니다.

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>

표현식 내부가 아닌 이와 같은 요소 수준에서 수행 할 때의 장점은 다양한 옵션의 스타일과 콘텐츠를 훨씬 더 많이 사용자 지정할 수 있다는 것입니다.
Supr

예,이 기능이 도움이 될 수 있다는 것을 알고 있지만 문서에 div를 추가하고 싶지 않습니다. 또한 감사
IgorCh

0

이것은 한 줄로 할 수 있습니다.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

td태그 에서의 사용법 :

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.