অ্যাংুলারজস টেমপ্লেট ডিফল্ট মান যদি নাল / অপরিজ্ঞাত বাঁধাই হয় তবে (ফিল্টার সহ)

Question

আমার একটি টেম্পলেট বাইন্ডিং রয়েছে যা অ্যাংুলারের তারিখ ফিল্টার ব্যবহার করে 'তারিখ' নামক একটি মডেল বৈশিষ্ট্য প্রদর্শন করে।

<span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span>

এ পর্যন্ত সব ঠিকই. তবে এই মুহুর্তে, তারিখের ক্ষেত্রে কোনও মান না থাকলে, বাইন্ডিং কিছুই প্রদর্শন করে না। তবে, তারিখ না থাকলে আমি 'বিভিন্ন' স্ট্রিংটি প্রদর্শন করতে চাই।

বাইনারি অপারেটরটি ব্যবহার করে আমি প্রাথমিক যুক্তিটি পেতে পারি:

<span class="gallery-date">{{gallery.date || 'Various'}}</span>

তবে আমি এটি তারিখ ফিল্টারটির সাথে কাজ করতে পারি না:

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Various"}}</span>

তারিখ ফিল্টারের পাশাপাশি আমি বাইনারি অপারেটরটি কীভাবে ব্যবহার করতে পারি?

Answer 1

আমার যা করতে হবে তা হ'ল নরম বন্ধনীগুলিতে এক্সপ্রেশনটির বাম-হাত মোড়ানো ছিল:

<span class="gallery-date">{{(gallery.date | date:'mediumDate') || "Various"}}</span>

Comments

আপনার কলামে একটি '0' মান প্রদর্শন করার প্রয়োজন হলে এটি কাজ করে না

— নীল শাহ

@ নীলশাহ আপনি এমন কিছু করেন তবে এটি কাজ করে:{{(gallery.date | date:'mediumDate') || "0"}}

— রহিল ওয়াজির

তারিখ অপরিজ্ঞাত পরিবর্তে শূন্য হলে কাজ করে না las এখনও একটি ভাল কৌশল। আমি আশঙ্কা করি আমার মামলার জন্য আমাকে একটি কাস্টম ফিল্টার তৈরি করতে হবে।

— ফিলোহো

Answer 2

আমি নিম্নলিখিত ফিল্টার তৈরি করেছি:

angular.module('app').filter('ifEmpty', function() {
    return function(input, defaultValue) {
        if (angular.isUndefined(input) || input === null || input === '') {
            return defaultValue;
        }

        return input;
    }
});

এটির মতো ব্যবহার করতে:

<span>{{aPrice | currency | ifEmpty:'N/A'}}</span>
<span>{{aNum | number:3 | ifEmpty:0}}</span>

Comments

সত্যিই দুর্দান্ত ধারণা! যদিও আমি এটিকে কিছুটা প্রসারিত ও অনুলিপি করেছি: if (angular.isUndefined(defaultValue) || ... )বিদ্যমানটির অভ্যন্তরে একটি বিবৃতি নেস্ট করে , যার মাধ্যমে defStringফিল্টারটি স্ট্রিং " default" দেয় (অন্যরা সম্ভবত পরে আসবে)। এটি আমাকে এটি হিসাবে ব্যবহার করতে <span>{{expected.string | defString}}</span>এবং defaultচূড়ান্ত ফলব্যাক স্তর হিসাবে পেতে অনুমতি দেয় ।

Answer 3

আপনি যদি অন্য কিছু চেষ্টা করতে চান তবেই। এটিই আমার পক্ষে কাজ করেছে:

টার্নারি অপারেটরের উপর ভিত্তি করে যার নিম্নলিখিত কাঠামো রয়েছে:

condition ? value-if-true : value-if-false

ফলে:

{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}

Comments

Pedr এর উত্তর (13 মে '13 13:27 এ stackoverflow.com/a/16523266/1563880 ) প্রায় একই কিন্তু পুলিশের সমাধান আরো স্পষ্ট হয়। হোওয়ের, আরও চিঠি লেখার জন্য)

— nktssh

এটি আরও স্বজ্ঞাত, বিশেষত যখন কোনও প্রোগ্রামিং ব্যাকগ্রাউন্ড থেকে আসে। টেরনারী অপারেটরগুলি যদি অন্য কোনও আইএফ-এর জন্য সহজ উপায় তৈরি করে।

— জিজ্ঞাসা করুন

পুরানো থ্রেডটি ধাক্কা দেওয়ার জন্য দুঃখিত, তবে এই সমাধানটি সম্ভবত গৃহীত উত্তরের চেয়ে আরও পারফরম্যান্ট, কারণ মানটি মিথ্যা হয়ে উঠলে এটি ফিল্টারটিকে কল করে না

— SnailCoil

গভীর শ্রেণিবিন্যাসের সাথে কাজ করার প্রয়োজন হলে এটি আরও কার্যকর।

— এমনকি মিয়েন

Answer 4

তারিখ ফিল্টারের পাশাপাশি আমি বাইনারি অপারেটরটি কীভাবে ব্যবহার করতে পারি?

<span class="gallery-date">{{gallery.date | date:'mediumDate' || "Date Empty"}}</span>

আপনিও চেষ্টা করুন:

<span class="gallery-date">{{ gallery.date == 'NULL' ? 'mediumDate' : "gallery.date"}}</span>

Answer 5

আমি এই উত্তরটি এনজিবাইন্ডের সাথে সত্যিই পছন্দ করেছি, আপনার ডিফল্ট পাঠ্যটি কেবলমাত্র উপাদান বডিটিতে থাকতে পারে এবং তারপরে এনজি বাইন্ড যদি কোনও শূন্য / অপরিজ্ঞাত কোন কিছুর মূল্যায়ন করে তবে আপনার বিষয়বস্তু স্বয়ংক্রিয়ভাবে প্রতিস্থাপিত হবে এবং সবকিছু সুখী হবে

অ্যাঙ্গুলারগুলি মূল্যায়নের আগে প্রদর্শনের জন্য ডিফল্ট মান নির্ধারণ করে

Answer 6

আপনার সিএসটিএমএলে,

<tr ng-repeat="value in Results">                
 <td>{{value.FileReceivedOn | mydate | date : 'dd-MM-yyyy'}} </td>
</tr>

আপনার জেএস ফাইলটিতে, সম্ভবত app.js,

অ্যাপকন্ট্রোলারের বাইরে, নীচের ফিল্টারটি যুক্ত করুন।

এখানে "মায়াডেট" হ'ল ফাংশন যা আপনি তারিখটি বিশ্লেষণের জন্য কল করছেন। এখানে "অ্যাপ্লিকেশন" হ'ল ভেরিয়েবল যা কৌণিক.মডিউল রয়েছে

app.filter("mydate", function () {
    var re = /\/Date\(([0-9]*)\)\//;
    return function (x) {
        var m = x.match(re);
        if (m) return new Date(parseInt(m[1]));
        else return null;
    };
});