Angularjs अगर-तो-और अभिव्यक्ति में निर्माण


109

क्या मैं किसी तरह अगर-तब-तब निर्माण (टर्नरी-ऑपरेटर) को कोणीयज अभिव्यक्ति में उपयोग कर सकता हूं, उदाहरण के लिए मेरे पास $ स्कोप है।इस एक्सिस्ट्स (आइटम) है जिसमें बूल मूल्य वापस करना है। मुझे ऐसा कुछ चाहिए,

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

मुझे पता है कि मैं फ़ंक्शन का उपयोग कर सकता हूं जो स्ट्रिंग लौटाता है, अगर मैं अभिव्यक्ति में तत्कालीन निर्माण का उपयोग करने की संभावना में दिलचस्प हूं। धन्यवाद।


3
बाहर की जाँच करेंng-switch
NilsH

3
1.2 चूंकि यह अब समर्थित है।
21

जवाबों:


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>

अद्यतन: कोणीय ऑपरेटरों के लिए कोणीय 1.1.5 समर्थन जोड़ा गया:

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

क्या && को बच निकलने की जरूरत है?
0xcaff

@Kffinatedmonkey नहीं तुम नहीं होना चाहिए। आप (यदि आपकी परियोजना के लिए संभव हो सके) तो टर्नरी ऑपरेटर का उपयोग कर सकते हैं जैसे मैंने विषय के प्रश्न के उत्तर में समझाया था।
सेबेस्टियन

@ सेबैस्टियन के बारे में <और >तुलना ऑपरेटरों के रूप में क्या है ?
0xcaff

@caffinatedmonkey कोई समस्या नहीं, {{1> 0? true: false}} या {{1> 0}} जो भी आपको पसंद है। {{१> ०}} १.०. 1 में भी काम करता है, लेकिन टर्नरी ऑपरेटर नहीं करता है।
सेबस्टियन

यह अभी भी एक महान जवाब है क्योंकि यह कोणीय-यूआई घटकों की सेटिंग्स के अंदर काम करता है (जबकि टर्नरी ऑपरेटर वहां किसी कारण से काम नहीं करता है)। शायद यह किसी को कोणीय-यूआई मापदंडों को निर्धारित करने में संघर्ष करने में मदद करता है
ओल्गा Gnatenko

39

आप संस्करण 1.1.5 और इसके बाद के संस्करण की तरह टर्नरी ऑपरेटर का उपयोग कर सकते हैं जैसे कि इस छोटे प्लंकर में प्रदर्शित (1.1.5 में उदाहरण):

इतिहास के कारणों के लिए (शायद plnkr.co भविष्य में किसी कारण के लिए नीचे उतरें) यहाँ मेरे उदाहरण का मुख्य कोड है:

{{true?true:false}}

इतिहास के कारणों के लिए (शायद plnkr.co भविष्य में किसी कारण के लिए नीचे उतरें) यहाँ मेरे उदाहरण का मुख्य कोड है:{{true?true:false}}
सेबस्टियन

1
वास्तव में मैं आपको धन्यवाद के लिए क्या देख रहा था, लगभग ऐसा करने के लिए एक फिल्टर का उपयोग किया।
अचल ईंट

1
@IgorCh: आप स्वीकृत उत्तर को अद्यतन करना चाह सकते हैं :)
पांडा

25

आप आसानी से एनजी-शो का उपयोग कर सकते हैं जैसे:

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

अधिक जटिल परीक्षणों के लिए, आप एनजी-स्विच स्टेटमेंट का उपयोग कर सकते हैं:

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

अभिव्यक्ति के अंदर की तरह तत्व स्तर पर इसे करने का एक फायदा यह है कि आप विभिन्न विकल्पों की शैली और सामग्री को बहुत अधिक अनुकूलित कर सकते हैं।
सुप्र

हां, मुझे पता है कि इस कार्यक्षमता के बारे में यह मदद कर सकता है, लेकिन मैं दस्तावेज़ में अतिरिक्त div नहीं जोड़ना चाहता। लेकिन यह भी धन्यवाद
इगोरच

0

यह एक लाइन में किया जा सकता है।

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

एक tdटैग में उपयोग :

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.