অ্যাঙ্গুলারজেএস টেম্পলেটগুলিতে টার্নারি অপারেটর

Question

আপনি AngularJS (টেমপ্লেটগুলিতে) দিয়ে কীভাবে একটি ত্রিনিয়ার করবেন?

নিয়ামকের কোনও ক্রিয়াকলাপ তৈরি এবং কল করার পরিবর্তে এইচটিএমএল বৈশিষ্ট্যগুলিতে (শ্রেণি এবং শৈলী) কিছু ব্যবহার করা ভাল হবে।

Answer 1

আপডেট : কৌণিক 1.1.5 একটি টার্নারি অপারেটর যুক্ত করেছে , এখন আমরা কেবল লিখতে পারি

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

---

আপনি যদি কৌনিকটির পূর্ববর্তী সংস্করণ ব্যবহার করে থাকেন তবে আপনার দুটি পছন্দ হ'ল:

1. (condition && result_if_true || !condition && result_if_false)
2. {true: 'result_if_true', false: 'result_if_false'}[condition]

উপরের আইটেম ২ দুটি বৈশিষ্ট্যযুক্ত একটি বস্তু তৈরি করে। অ্যারের সিনট্যাক্সটি হয় সত্যের নামে সম্পত্তি বা মিথ্যা নামযুক্ত সম্পত্তি নির্বাচন করতে এবং যুক্ত মানটি ফেরত দিতে ব্যবহৃত হয়।

যেমন,

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

element প্রথম উপাদানটির জন্য এনজি-রিপিটের ভিতরে প্রথমে সত্যে সেট করা থাকে, সুতরাং উপরেরটি লুপের মাধ্যমে 'মাই ক্লাস 1' এবং 'মাই ক্লাস 2' কেবল প্রথমবার প্রয়োগ করবে।

এনজি-ক্লাসের সাথে আরও সহজ উপায় রয়েছে যদিও: এনজি-ক্লাস একটি অভিব্যক্তি গ্রহণ করে যা নিম্নলিখিত নীচের একটিতে মূল্যায়ন করতে হবে:

1. স্পেস-সীমাবদ্ধ শ্রেণীর নামের একটি স্ট্রিং
2. শ্রেণি নামের একটি অ্যারে
3. বুলিয়ান মানগুলিতে শ্রেণীর নামের মানচিত্র / অবজেক্ট।

1 এর উদাহরণ) উপরে দেওয়া হয়েছিল। এখানে 3 টির একটি উদাহরণ দেওয়া হয়েছে, যা আমার মনে হয় আরও ভাল পড়ে:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

এনজি-রিপিট লুপের মাধ্যমে প্রথমবার, ক্লাস মাইক্লাস যুক্ত করা হয়েছে। তৃতীয় বারের মাধ্যমে ($ সূচক 0 থেকে শুরু হয়), ক্লাসের অন্য একটি ক্লাস যুক্ত করা হয়।

এনজি-স্টাইল একটি অভিব্যক্তি গ্রহণ করে যা সিএসএস শৈলীর নামের মানচিত্র / অবজেক্টের সিএসএস মানগুলিতে মূল্যায়ন করতে হবে। যেমন,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Comments

আমি যদি প্রশ্নটি আপডেট করার জন্য আপনাকে আবার উত্সাহ দিতে পারতাম!

— নারেটজ

আমি এটি যত্ন নেব, @ নারেটজ।

— ইয়ান হান্টার

অবজেক্ট-কী অ্যাক্সেস করার উদাহরণে, আপনি 'মিথ্যা' কীটি যেভাবেই ফাঁকা স্ট্রিংয়ের কারণে এড়িয়ে যেতে পারেন।

— 0xc0de

সতর্কতার শব্দ, 1.1.5 বর্তমানে স্থিতিশীল নয়।

— অ্যাডাম গ্রান্ট

আপনার মডেলটি আপডেট হওয়ার পরে শর্তযুক্ত পরিবর্তন হলে কী হবে? আমি ng-styleআপডেট করতে চাই , তবে উপাদানটি প্রথম রেন্ডার করার পরে এটির মূল্যায়ন হবে বলে মনে হয়। (কৌণিক নুব এখানে)

— হার্টলে ব্রডি

Answer 2

আপডেট: কৌণিক 1.1.5 একটি টার্নারি অপারেটর যুক্ত করেছে, এই উত্তরটি কেবলমাত্র 1.1.5 পূর্ববর্তী সংস্করণগুলিতে সঠিক। 1.1.5 এবং তার পরে, বর্তমানে গৃহীত উত্তর দেখুন।

কৌণিক 1.1.5 এর আগে:

কৌণিকরেখায় একটি টেরিনারির রূপটি হ'ল:

((condition) && (answer if true) || (answer if false))

একটি উদাহরণ হবে:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

বা:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

Comments

রহস্যময়। এটি খুব স্বজ্ঞাত নয়। আমি ভাবছি কেন এটি এভাবে বাস্তবায়ন করা হয়েছিল।

— বেন লেশ

টেরানারি কখনও প্রয়োগ করা হয়নি, তবে এটি কেবল বাইনারি অপারেটরদের তাদের কাজ করার পদ্ধতি ব্যবহার করছে।

— অ্যান্ড্রু জোসলিন

@blesh, AngularJS পরীক্ষাযোগ্যতা প্রচার করে। টেমপ্লেটগুলিতে কোনও যুক্তি থাকা উচিত নয়। আরও ভাল টেস্টেবলির জন্য টেম্পলেটের একটি টার্নারি অপারেটরটিকে নিয়ামকের কাছে একটি ফাংশন কলে রিফ্যাক্ট করা উচিত।

— মার্সেলো নিউসিও

@ arg20 আপনার এনজি ক্লাস নির্দেশিকা (বা এনজি ক্লাসইভেন এবং এনজি ক্লাসঅডড) ব্যবহার করা উচিত । তারপরে কন্ট্রোলারে সিএসএস ক্লাস বেছে নেওয়ার জন্য সমস্ত যুক্তি রাখুন। এটি স্বয়ংক্রিয়ভাবে পরীক্ষা করা আরও অনেক সহজ।

— মার্সেলো ন্যাকসিও

@ আরজি ২০ আমি মডেলটিতে নয়, এটি নিয়ন্ত্রণকারীতে রাখতে বলেছি। এটি কোনও সমস্যা হওয়া উচিত নয়। যাইহোক, ডকুমেন্টেশনটি বলে: "মূল্যায়নের ফলাফলটি এমন একটি স্ট্রিং হতে পারে যা স্থানের সীমানিত শ্রেণীর নাম, একটি অ্যারে বা বুলিয়ান মানগুলিতে শ্রেণীর নামের মানচিত্র উপস্থাপন করে"। এর অর্থ হল যে আপনি "{cssclass: someBoolCheck ()}" ব্যবহার করতে পারবেন একটি অভিব্যক্তি হিসাবে, অর্থাৎ আপনি সিএসএস ক্লাসটি ভিউতে রেখেছেন এবং নিয়ামকটিতে যুক্তি রেখেছেন। একটি উদাহরণের জন্য এই jsFizz দেখুন ।

— মার্সেলো নিউসিও

Answer 3

কৌণিক টেমপ্লেটের পাঠ্যগুলির জন্য ( userType$ স্কোপ.ইউসারটাইপের মতো $ সুযোগের সম্পত্তি):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

Answer 4

এখন অবধি আমরা সকলেই খুঁজে পেয়েছি সংস্করণ ১.১.৫ এ ফাংশনটিতে একটি সঠিক ত্রিনিয়ারী আসে $parseতাই কেবল এই উত্তরটি ফিল্টারগুলির উদাহরণ হিসাবে ব্যবহার করুন:

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

এবং তারপরে এটি ব্যবহার করুন

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

Comments

আমি টার্নারি অপারেটরের জন্য এই প্রশ্নে এসেছি তবে শেষে আমি একটি ফিল্টার নিয়ে গিয়েছিলাম এবং এটি সত্যিই ভাল

— লাগছিল

Answer 5

এটি এখানে রয়েছে: টেরিনারি অপারেটর 1.1.5 তে কৌনিক পার্সারে যুক্ত হয়েছিল ! পরিবর্তন দেখুন

এনজি-ক্লাসের নির্দেশিকায় ব্যবহৃত নতুন টার্নারি অপারেটরটি দেখানো একটি ফ্রিডল এখানে ।

ng-class="boolForTernary ? 'blue' : 'red'"

Answer 6

আপনি ব্যবহার করতে পারেন যদিও condition && if-true-part || if-false-partকৌণিক পুরোনো সংস্করণে -syntax স্বাভাবিক তিন অপারেটর condition ? true-part : false-partপাওয়া যায় কৌণিক 1.1.5 এবং পরে ।

Answer 7

  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

বাটন টগল করুন এবং বোতামের শিরোনাম পরিবর্তন করুন এবং ডিভিডি প্যানেলটি লুকান / দেখান। Plunkr দেখুন