모델 데이터에 따라 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')는 중요합니다.인용문이 없으면 안 돼요.

여기 좀 봐. (dev 툴을 열어 생성된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는 이미지가 3개 이상 있는 경우 더 좋거나 더 좋지 않을 수 있습니다.

다른 방법..

<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>

angular 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