यदि अन्य विवरण AngularJS टेम्प्लेट में है

Question

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

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

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

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

• कार्यक्षेत्र में कोई फ़ंक्शन जोड़ें?
• इसे टेम्प्लेट में करें?

Comments

मुझे यहां एक एनजी-इफ आर्टिकल मिला। goo.gl/wQ30uf

— वीरेंद्र

Answer 1

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

( यदि आप संस्करण १.१.५ या अधिक का उपयोग कर रहे हैं, तो नीचे (# ५) अपडेट करें )

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

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

<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-hideशर्त को छिपाएगा जो उस स्थिति को पूरा करती है और उसे दिखाती है ng-show। इसलिए प्रत्येक पृष्ठ पर आप वास्तव में दो अलग-अलग तत्वों का प्रतिपादन करेंगे।

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

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

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

ऊपर मूल रूप से सत्य large-videoहोने पर div तत्व में css क्लास जोड़ देगा video.large।

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

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

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

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

Comments

इसके ng-switch on="video"बजाय होना चाहिएng-switch-on="video"

— czerasz

वह कैसे करते हैं? if () {} और अगर () {} और अगर () {} और {} लेकिन डोम में केवल एक तत्व शामिल करें

— falko

इसके अलावा त्रिगुट<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>

— कर्क स्ट्रोबेक

ध्यान रखें कि रखें ng-ifनहीं करने के लिए अपनी स्थिति का मूल्यांकन जब तक डोम को संलग्न तत्वों को जोड़ने जाएगा true, के विपरीत ng-hideऔर ng-show।

— विल्हेम मर्डोक

बस क्यों नहीं ng-switch="video"? कुछ समस्या? या यह पहले उपलब्ध नहीं था? मेरे लिए यह काफी ठीक काम कर रहा है

— सामी

Answer 2

कोणीय के नवीनतम संस्करण (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>

Comments

ध्यान रखें कि ng-ifएक अलग-अलग गुंजाइश का परिचय देता है , ताकि शरीर में $parentबन जाए । $parent.$parentng-if

— डेविड सलामन

Answer 3

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

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

Comments

हो या में 2 शर्त के साथ ऐसा करने के लिए ?? जैसे <div> {{A == B || ए == सी? 'varIsTrue': 'varIsFalse'}} </ div>

— YoBre

इसे लपेटें (A == B || A == C)

— ओलिवर डिक्सन

इस जवाब को प्यार करो! एनजी- निर्देशों का उपयोग करने से एचटीएमएल व्हाट्सएप बहुत सारे देता है अगर कोई

— डीआईएस

Answer 4

कोणीय स्वयं / अन्य कार्यक्षमता प्रदान नहीं करता है, लेकिन आप इस मॉड्यूल को शामिल करके इसे प्राप्त कर सकते हैं:

https://github.com/zachsnow/ng-elif

अपने शब्दों में, यह सिर्फ "नियंत्रण प्रवाह निर्देशों का एक सरल संग्रह है: एनजी-अगर, एनजी-इफ-इफ, और एनजी-इवन।" यह प्रयोग करने में आसान और सहज है।

उदाहरण:

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>

Comments

मैं बार-बार डिव में कोड दोहराना नहीं चाहता।

आपको कुछ भी दोहराना नहीं है - आप आसानी से कर सकते हैं ng-if="someCondition && someOtherCondition"। शायद मुझे गलतफहमी है? (मुझे लगता है कि मॉड्यूल लिखा था - यह बस की तरह काम करना चाहिए ifऔर elseजे एस में)।

— ज़च स्नो

यह एक पूर्ण जीवन रक्षक है। यह कोणीय कोर का हिस्सा होना चाहिए, यह टेम्पलेट कोडिंग में अपरिहार्य है। सभी जगह पर टर्नरी ऑपरेटर होने की तुलना में वे क्लीनर, और एनजी-स्विच की सीमाओं को पार करते हैं जो अभिव्यक्ति का मूल्यांकन करने में सक्षम नहीं हैं।

— निको वेस्टरडेल

धन्यवाद @NicoWesterdale! इसके अलावा, मैंने एनजी-स्विच का एक समृद्ध संस्करण जोड़ा है जो आपको उपयोगी लग सकता है: github.com/zachsnow/ng-cases

— Zach Snow

Answer 5

आप अपनी 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>

Comments

video.yt$aspectRatioखाली या अपरिभाषित होने पर आपके कोड के बारे में क्या? क्या डिफ़ॉल्ट मान लागू करना संभव है?

— फ्रैक्टालिस्टे

Answer 6

इस स्थिति में आप किसी ऑब्जेक्ट प्रॉपर्टी के आधार पर पिक्सेल मान की "गणना" करना चाहते हैं।

मैं नियंत्रक में एक फ़ंक्शन को परिभाषित करता हूं जो पिक्सेल मूल्यों की गणना करता है।

नियंत्रक में:

$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

फिर अपने टेम्पलेट में आप बस लिखें:

element height="{{ GetHeight(aspect) }}px "

Answer 7

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

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

Answer 8

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

आप उपर्युक्त के अनुसार ng-if निर्देश का उपयोग कर सकते हैं।

Answer 9

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

टेम्पलेट में HTML हिस्सा:

    <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';
      }
  }

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

जनवरी

Comments

AngularJS की तुलना में Angular ज्यादा लगता है।

— पजेसर

@pzaenger, हाँ, लेकिन इस प्रश्न के लिए कई उत्तर दोनों के लिए काम करते हैं, इसलिए मुझे लगता है कि कुछ लोग, मेरे जैसे, वैसे भी उत्तरों को देखते हैं। कृपया मुझे पता है अगर तुम मन।

— जनवरी क्लेमेंस स्टॉफरेगन

कुंआ। कम से कम आपको अपने उत्तर में इसका उल्लेख करना चाहिए।

— पजेसर

@pzaenger, इस संकेत के लिए धन्यवाद, मैंने अब इसका उल्लेख किया।

— जनवरी क्लेमेंस स्टॉफरेगन

Answer 10

अन्य विवरण

ng-if="receiptData.cart == undefined ? close(): '' ;"