모델 데이터를 기반으로 img src를 조건부로 변경

모델 데이터를 기반으로 img src를 조건부로 변경

---

Angular를 사용하여 모델 데이터를 다른 이미지로 표현하고 싶지만 "올바른"방법을 찾는 데 어려움이 있습니다. 표현식에 대한 Angular API 문서에서는 조건식이 허용되지 않는다고 말합니다.

많은 것을 단순화하면 모델 데이터는 AJAX를 통해 가져와 라우터의 각 인터페이스 상태를 보여줍니다. 다음과 같은 것 :

$scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"]

따라서 Angular에서 다음과 같이 각 인터페이스의 상태를 표시 할 수 있습니다.

<ul>
  <li ng-repeat=interface in interfaces>{{interface}}
</ul>

그러나-모델의 값 대신 적절한 이미지를 보여주고 싶습니다. 이 일반적인 아이디어를 따르는 것.

<ul>
  <li ng-repeat=interface in interfaces>
    {{if interface=="UP"}}
       <img src='green-checkmark.png'>
    {{else}}
       <img src='big-black-X.png'>
    {{/if}}
</ul>

(나는 Ember가 이러한 유형의 구조를 지원한다고 생각합니다)

물론 실제 모델 데이터를 기반으로 이미지 URL을 반환하도록 컨트롤러를 수정할 수 있지만 이는 모델과 뷰의 분리를 위반하는 것 같습니다.

이 SO Posting 은 bg-img 소스를 변경하는 지시문을 사용하도록 제안했습니다. 그러나 우리는 템플릿이 아닌 JS에 URL을 넣는 것으로 돌아갑니다.

모든 제안에 감사드립니다. 감사.

오타를 용서 해주세요

---

대신에 src당신이 필요합니다 ng-src.

AngularJS 뷰는 이진 연산자를 지원합니다.

condition && true || false

따라서 img태그는 다음과 같습니다.

<img ng-src="{{interface == 'UP' && 'green-checkmark.png' || 'big-black-X.png'}}"/>

참고 : 여기에서는 따옴표 (예 : 'green-checkmark.png')가 중요합니다. 따옴표 없이는 작동하지 않습니다.

여기 plunker (생성 된 HTML을 보려면 개발 도구를 엽니 다)

---

또 다른 대안 (@ jm-에서 제안한 이진 연산자 제외)은 ng-switch 를 사용하는 것입니다 .

<span ng-switch on="interface">
   <img ng-switch-when="UP" src='green-checkmark.png'>
   <img ng-switch-default   src='big-black-X.png'>
</span>

두 개 이상의 이미지가 있으면 ng-switch가 더 좋고 / 더 쉬울 것입니다.

---

또 다른 방법 ..

<img ng-src="{{!video.playing ? 'img/icons/play-rounded-button-outline.svg' : 'img/icons/pause-thin-rounded-button.svg'}}" />

---

<ul>
  <li ng-repeat=interface in interfaces>
       <img src='green-checkmark.png' ng-show="interface=='UP'" />
       <img src='big-black-X.png' ng-show="interface=='DOWN'" />
  </li>
</ul>

---

각도 4의 경우

<img [src]="data.pic ? data.pic : 'assets/images/no-image.png' " alt="Image" title="Image">

그것은 나를 위해 작동하며 다른 사람에게도 사용할 수 있기를 바랍니다 Angular 4-5. :)

참고 URL : https://stackoverflow.com/questions/13999659/conditionally-change-img-src-based-on-model-data