যদি AngularJS টেম্পলেটগুলিতে অন্য বিবৃতি

Question

আমি একটি কৌনিক জেএস টেমপ্লেটে একটি শর্ত করতে চাই। আমি ইউটিউব এপিআই থেকে একটি ভিডিও তালিকা আনছি। কিছু ভিডিও 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কার্যকারিতা সরবরাহ করে না । আপনি কী অর্জন করতে চান তার জন্য নিম্নলিখিত কয়েকটি বিকল্প বিবেচনা করুন:

( আপনি যদি ১.১.৫ বা তার বেশি সংস্করণ ব্যবহার করেন তবে নীচের আপডেটে যান (# 5 )

1. টার্নারি অপারেটর:

মন্তব্যগুলিতে @ কিরক দ্বারা প্রস্তাবিত হিসাবে, এটি করার সর্বোত্তম উপায় হ'ল একটি টার্নারি অপারেটরটি নিম্নরূপ ব্যবহার করা:

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

২. 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। সুতরাং প্রতিটি পৃষ্ঠায় আপনি আসলে দুটি ভিন্ন উপাদান রেন্ডারিং করা হবে।

৪. বিবেচনার জন্য আরেকটি বিকল্প হ'ল ng-classনির্দেশনা।

এটি নিম্নলিখিত হিসাবে ব্যবহার করা যেতে পারে।

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

উপরেরটি মূলত ডিভ large-videoউপাদানটিতে একটি সিএসএস শ্রেণি যুক্ত করবে যদি video.largeসত্যবাদী হয়।

আপডেট: কৌণিক 1.1.5 চালু করেছেngIf directive

৫. ng-ifনির্দেশ:

উপরের সংস্করণগুলিতে 1.1.5আপনি ng-ifনির্দেশটি ব্যবহার করতে পারেন । অভিব্যক্তিটি প্রদান করে falseএবং এক্সপ্রেশনটি যদি ফিরে আসে elementতবে DOM- এ পুনরায় সন্নিবেশ করায় এটি উপাদানটিকে সরিয়ে ফেলবে 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 অন্যথায় যদি () {} অন্য {} তবে

— ডোমে

এছাড়াও তিন্নি<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>

— কির্ক স্ট্রোবেক

মনে রাখবেন যে ng-ifDOM এর সাথে জড়িত উপাদানগুলিকে যুক্ত করা হবে না যতক্ষণ না এর শর্তটি এর 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 শর্তের সাথে এটি করতে বা ?? <ডিভ> {{এ == বি || এ == সি? 'varIsTrue': 'varIsFalse'}} </div>

— YoBre

এটি মোড়ানো (এ == বি || এ == সি)

— অলিভার ডিকসন

এই উত্তর ভালবাসা! Ng- নির্দেশনা ব্যবহার এইচটিএমএল হোয়াইটস্পেস প্রচুর দেয় একটি div শর্ত সন্তুষ্ট নয় ..

— sksallaj

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জাতীয় মধ্যে)।

— জ্যাচ স্নো

এটি একটি পরম জীবনকালীন a এটি কৌনিক মূলের অংশ হওয়া উচিত, এটি টেমপ্লেট কোডিংয়ে অপরিহার্য। পুরো জায়গা জুড়ে টেরিনারি অপারেটর থাকার চেয়ে ওয়ে ক্লিনার এবং এনজি-স্যুইচের এক্সপ্রেশনগুলি মূল্যায়ণ করতে না পারার সীমাবদ্ধতাগুলি অতিক্রম করে।

— নিকো ওয়েস্টারডেল

ধন্যবাদ @ নিকোওয়েস্টারডেল! এছাড়াও, আমি আপনাকে এনজি-স্যুইচের একটি আরও উন্নত সংস্করণ যুক্ত করেছি যেটা আপনাকে দরকারী মনে করতে পারে: github.com/zachsnow/ng-cases

— জ্যাচ স্নো

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>

আপনি উপরের মতো এনজি-ইফ ডাইরেক্টিভ ব্যবহার করতে পারেন।

Answer 9

কৌণিকর জন্য একটি সম্ভাবনা: এইচটিএমএল অংশে আমাকে একটি আইফ - বিবৃতি অন্তর্ভুক্ত করতে হবে, আমার তৈরি হওয়া ইউআরএলটির সমস্ত ভেরিয়েবল সংজ্ঞায়িত কিনা তা আমাকে পরীক্ষা করে দেখতে হয়েছিল। আমি এটি নিম্নলিখিত পদ্ধতিতে করেছি এবং এটি একটি নমনীয় পদ্ধতির বলে মনে হচ্ছে। আমি আশা করি এটি কারও পক্ষে সহায়ক হবে।

টেমপ্লেটের এইচটিএমএল অংশ:

    <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

অ্যাঙ্গুলারজেএস-এর চেয়ে কৌণিকের মতো বেশি দেখাচ্ছে

— pzaenger

@ প্লাজেঞ্জার, হ্যাঁ, তবে এই প্রশ্নের অনেক উত্তর উভয়ের পক্ষেই কাজ করে, তাই আমি মনে করি কিছু লোক নিজের মতো করেও উত্তরগুলি তাকান। যদি আপনি কিছু মনে করেন দয়া করে।

— জান ক্লেম্যানস স্টফ্রেজেন

আমরা হব. কমপক্ষে আপনার উত্তরে এটি উল্লেখ করা উচিত।

— pzaenger

@ প্লাজেঙ্গার, এই ইঙ্গিতটির জন্য আপনাকে ধন্যবাদ, আমি এখন এটি উল্লেখ করেছি।

— জান ক্লেম্যানস স্টফ্রেজেন

Answer 10

এনজি যদি অন্য বিবৃতি

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