मॉडल डेटा

Question

पर आधारित img src को सशर्त रूप से बदलें, मैं कोणीय का उपयोग करके अलग-अलग छवियों के रूप में मॉडल डेटा का प्रतिनिधित्व करना चाहता हूं लेकिन इसे करने के लिए "सही" तरीका ढूंढने में कुछ परेशानी हो रही है। कोणीय API docs on expressions का कहना है कि सशर्त अभिव्यक्तियों की अनुमति नहीं है ...

बहुत सरलीकृत करना, मॉडल डेटा AJAX के माध्यम से लाया जाता है और आपको राउटर पर प्रत्येक इंटरफ़ेस की स्थिति दिखाता है। कुछ की तरह:

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

तो, कोणीय में, हम प्रत्येक इंटरफ़ेस के राज्य की तरह कुछ के साथ प्रदर्शित कर सकते हैं:

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

(मुझे लगता है कि एंबर निर्माण के इस प्रकार का समर्थन करता है)

बेशक

, मैं वास्तविक मॉडल डेटा के आधार पर चित्र URL, वापस जाने के लिए नियंत्रक को संशोधित कर सकता है लेकिन यह है कि मॉडल की जुदाई का उल्लंघन करने लगता है और देखो, नहीं?

This SO Posting बीजी-आईएमजी स्रोत को बदलने के निर्देश का उपयोग करने का सुझाव दिया। लेकिन फिर हम जेएस में यूआरएल को टेम्पलेट नहीं डाल रहे हैं ...

सभी सुझावों की सराहना की। धन्यवाद।

कोई लेखन त्रुटि

Answer 1

के बजाय src आप ng-src जरूरत क्षमा करें।

AngularJS विचारों का समर्थन द्विआधारी ऑपरेटरों

condition && true || false 

तो अपने img टैग की तरह इस

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

नोट दिखेगा: उद्धरण (यानी 'ग्रीन-checkmark.png') यहां महत्वपूर्ण हैं । यह उद्धरण के बिना काम नहीं करेगा।

plunker hereएक अन्य विकल्प (@ jm- ने सुझाव दिया द्विआधारी ऑपरेटरों को छोड़कर) (खुला देव उपकरणों का उत्पादन HTML को देखने के लिए)

Answer 2

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> 

एनजी स्विच होगा यदि आपके पास दो से अधिक छवियां हैं तो संभवतः बेहतर/आसान हो सकता है।

Answer 3

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

Answer 4

एक और तरीका है ..

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