Angularjs टेम्पलेट डिफ़ॉल्ट मान यदि बाध्यकारी / अपरिभाषित (फ़िल्टर के साथ)

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' मान प्रदर्शित करने की आवश्यकता नहीं है

— neel shah

@ नीलशाह यह काम करता है यदि आप कुछ ऐसा करते हैं:{{(gallery.date | date:'mediumDate') || "0"}}

— राहिल वज़ीर

यदि तारीख अपरिभाषित के बजाय शून्य है, तो काम नहीं करता है। फिर भी एक अच्छी चाल है। मुझे डर है कि मुझे अपने मामले के लिए एक कस्टम फ़िल्टर बनाना होगा।

— फील्हो

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

पेडर का जवाब (13 मई 13 को 13:27 पर, stackoverflow.com/a/16523266/1563880 ) लगभग समान है लेकिन आपका समाधान अधिक स्पष्ट है। हावेर, लिखने के लिए और अधिक पत्र)

— nktssh

यह अधिक सहज है, खासकर जब एक प्रोग्रामिंग पृष्ठभूमि से आ रहा है। टर्नरी ऑपरेटर सरल इफ्स इफ्स के लिए मार्ग प्रशस्त करते हैं।

— asgs

एक पुराने धागे को टक्कर देने के लिए खेद है, लेकिन यह समाधान भी संभवतः स्वीकृत उत्तर की तुलना में अधिक अच्छा है, क्योंकि यह फ़िल्टर को कॉल नहीं करता है यदि मान गलत आएगा

— SnailCoil

गहरी पदानुक्रम के साथ काम करने की आवश्यकता होने पर यह अधिक उपयोगी है।

— यहां तक ​​कि Mien

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

मैं वास्तव में इस जवाब को पसंद करता था, ngBind के साथ, आपका डिफ़ॉल्ट पाठ बस तत्व बॉडी में रह सकता है, और फिर अगर ngBind कुछ गैर-अशक्त / अपरिभाषित का मूल्यांकन करता है, तो आपकी सामग्री को स्वचालित रूप से बदल दिया जाता है, और सभी खुशियों को

मूल्यांकन से पहले प्रदर्शित करने के लिए डिफ़ॉल्ट मान सेट करना angularjs

Answer 6

अपने cshtml में,

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

आपकी JS फ़ाइल में, शायद app.js,

App.controller के बाहर, नीचे फिल्टर जोड़ें।

यहाँ "mydate" वह फ़ंक्शन है जिसे आप डेट पार्स करने के लिए कह रहे हैं। यहां "ऐप" वैरिएबल है जिसमें एंगुलर.module होता है

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