if statement - अगर AngularJS टेम्पलेट्स में और कथन




if-statement (6)

Angularjs (1.1.5 से नीचे संस्करण) if/else कार्यक्षमता प्रदान if/else करता है। आप जो हासिल करना चाहते हैं उसके लिए विचार करने के लिए कुछ विकल्प निम्नलिखित हैं:

( यदि आप संस्करण 1.1.5 या इससे अधिक का उपयोग कर रहे हैं तो नीचे दिए गए अपडेट पर जाएं (# 5 )

1. टर्नरी ऑपरेटर:

टिप्पणियों में @ किर्क द्वारा सुझाए गए अनुसार, ऐसा करने का सबसे साफ तरीका निम्नानुसार एक टर्नरी ऑपरेटर का उपयोग करना होगा: 

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. ng-switch निर्देश:

निम्नलिखित की तरह कुछ इस्तेमाल किया जा सकता है। 

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

3. ng-hide / ng-show निर्देश

वैकल्पिक रूप से, आप ng-show/ng-hide भी उपयोग कर सकते ng-show/ng-hide लेकिन इसका उपयोग करने से वास्तव में एक बड़ा वीडियो और एक छोटा वीडियो तत्व दोनों प्रस्तुत किया जाएगा और फिर उस व्यक्ति को छुपाएं जो ng-hide स्थिति को पूरा करता है और जो दिखाता है वह ng-show स्थिति को पूरा करता है । तो प्रत्येक पृष्ठ पर आप वास्तव में दो अलग-अलग तत्वों को प्रस्तुत करेंगे।

4. विचार करने का एक और विकल्प ng-class निर्देश है।

इस प्रकार इसका उपयोग किया जा सकता है। 

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

उपरोक्त मूल रूप large-video तत्व को video.large तत्व में video.large करने के लिए एक large-video सीएसएस कक्षा को div तत्व में जोड़ देगा।

अद्यतन: कोणीय 1.1.5 ने ngIf directive प्रस्तुत किया

5. ng-if निर्देश:

1.1.5 ऊपर के संस्करणों में आप ng-if निर्देश ng-if उपयोग कर सकते हैं। यदि अभिव्यक्ति प्रदान की गई अभिव्यक्ति false जाती है और अभिव्यक्ति true होने पर डीओएम में element को फिर से सम्मिलित करती है तो यह तत्व को हटा देगा। निम्नानुसार उपयोग किया जा सकता है। 

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

मैं एक AngularJS टेम्पलेट में एक शर्त करना चाहता हूँ। मैं यूट्यूब एपीआई से एक वीडियो सूची लाता हूं। कुछ वीडियो 16: 9 अनुपात में हैं और कुछ 4: 3 अनुपात में हैं।

मैं इस तरह की हालत बनाना चाहता हूं: 

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

मैं ng-repeat का उपयोग कर वीडियो पुनरावृत्त कर रहा हूँ। मुझे पता नहीं है कि इस शर्त के लिए मुझे क्या करना चाहिए:

  • दायरे में एक समारोह जोड़ें?
  • इसे टेम्पलेट में करें?

आप अपने video.yt$aspectRatio उपयोग कर सकते हैं। video.yt$aspectRatio प्रॉपर्टी सीधे फ़िल्टर के माध्यम से इसे पास करके, और परिणाम को अपने टेम्पलेट में ऊंचाई विशेषता के लिए बाध्यकारी कर सकते हैं।

आपका फ़िल्टर कुछ ऐसा दिखाई देगा: 

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

और टेम्पलेट होगा: 

<video height={{video.yt$aspectRatio | videoHeight}}></video>

कोणीय की संभावना: मुझे HTML भाग में एक if-statement शामिल करना था, मुझे यह जांचना पड़ा कि मेरे द्वारा उत्पादित यूआरएल के सभी चर परिभाषित किए गए हैं या नहीं। मैंने इसे निम्न तरीके से किया और यह एक लचीला दृष्टिकोण प्रतीत होता है। मुझे आशा है कि यह किसी के लिए सहायक होगा।

टेम्पलेट में एचटीएमएल भाग: 

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

और टाइपस्क्रिप्ट भाग: 

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

धन्यवाद एवं शुभकामनाएँ,

जनवरी

कोणीय के नवीनतम संस्करण (1.1.5 के रूप में) में, उन्होंने ngIf नामक एक सशर्त निर्देश शामिल किया है। यह ngShow और ngHide से अलग है जिसमें तत्व छिपे नहीं हैं, लेकिन डोम में शामिल नहीं हैं। वे उन घटकों के लिए बहुत उपयोगी हैं जो बनाने के लिए महंगे हैं लेकिन इनका उपयोग नहीं किया जाता है: 

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

टर्नरी ऐसा करने का सबसे स्पष्ट तरीका है। 

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>

मैं मानता हूं कि एक टर्नरी बेहद साफ है। ऐसा लगता है कि यह बहुत परिस्थितिपूर्ण है हालांकि कुछ ऐसा होने के रूप में मुझे div या p या table को प्रदर्शित करने की आवश्यकता है, इसलिए एक तालिका के साथ मैं स्पष्ट कारणों से एक टर्नरी पसंद नहीं करता हूं। किसी फ़ंक्शन पर कॉल करना आम तौर पर आदर्श है या मेरे मामले में मैंने यह किया है: 

<div ng-controller="TopNavCtrl">
        <div ng-if="info.host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>



if-statement   angularjs  


angularjs