모델 데이터를 기반으로 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
'Programing' 카테고리의 다른 글
C ++에서 헤더 파일을 제거해야합니까? (0) | 2020.11.03 |
---|---|
UITableViewCell을 선택하면 UIView backgroundColor가 사라집니다. (0) | 2020.11.03 |
Android NavigationView 메뉴 그룹 구분선 (0) | 2020.11.03 |
Angular-ng-repeat order를 만들 수 없습니다. (0) | 2020.11.03 |
Genymotion Android 에뮬레이터에서 localhost에 액세스하는 방법은 무엇입니까? (0) | 2020.11.03 |