เทมเพลต Angularjs ค่าเริ่มต้นหากการเชื่อมโยง Null / ไม่ได้กำหนด (พร้อมตัวกรอง)


180

ฉันมีการโยงเทมเพลตที่แสดงคุณลักษณะของโมเดลที่เรียกว่า 'date' ซึ่งเป็นวันที่โดยใช้ตัวกรองวันที่ของ Angular

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

ฉันจะใช้ตัวดำเนินการไบนารีข้างตัวกรองวันที่ได้อย่างไร

คำตอบ:


293

กลับกลายเป็นว่าสิ่งที่ฉันต้องทำคือห่อด้านซ้ายของนิพจน์ด้วยเครื่องหมายวงเล็บอ่อน:

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

12
วิธีนี้ใช้ไม่ได้หากคุณต้องการแสดงค่า '0' ในคอลัมน์
neel shah

6
@neelshah ใช้งานได้ถ้าคุณทำอะไรเช่น:{{(gallery.date | date:'mediumDate') || "0"}}
Rahil Wazir

2
ไม่ทำงานหากวันที่เป็นศูนย์แทนที่จะไม่ได้กำหนดอนิจจา ยังคงเป็นเคล็ดลับที่ดี ฉันกลัวว่าฉันจะต้องสร้างตัวกรองที่กำหนดเองสำหรับกรณีของฉัน
PhiLho

52

ฉันทำตัวกรองต่อไปนี้:

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>

ความคิดที่ยอดเยี่ยมแน่นอน! ฉันขยายและทำซ้ำเล็กน้อย: การทำif (angular.isUndefined(defaultValue) || ... )คำสั่งภายในคำสั่งที่มีอยู่ซึ่งdefStringตัวกรองจะส่งคืนสตริง " default" (คนอื่นอาจจะมาทีหลัง) สิ่งนี้ทำให้ฉันสามารถใช้<span>{{expected.string | defString}}</span>และdefaultเป็นระดับทางเลือกสุดท้าย

37

ในกรณีที่คุณต้องการลองอย่างอื่น นี่คือสิ่งที่ได้ผลสำหรับฉัน:

ขึ้นอยู่กับผู้ประกอบการ Ternary ซึ่งมีโครงสร้างดังต่อไปนี้:

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

ผลลัพธ์:

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

1
คำตอบของ Pedr (13 พฤษภาคม 13 เวลา 13:27, stackoverflow.com/a/16523266/1563880 ) เกือบเหมือนกัน แต่โซลูชันของคุณชัดเจนกว่า Howerer, ตัวอักษรมากขึ้นที่จะเขียน)
nktssh

1
สิ่งนี้ง่ายยิ่งขึ้นโดยเฉพาะเมื่อมาจากพื้นหลังการเขียนโปรแกรม ผู้ประกอบการที่ประกอบไปด้วยปูทางสำหรับง่ายถ้าอื่น Ifs
asgs

2
ขอโทษที่จะชนด้ายเก่า แต่แก้ปัญหานี้ยังอาจเป็น performant มากกว่าคำตอบที่ได้รับการยอมรับเพราะมันไม่ได้เรียกตัวกรองถ้าค่าจะเกิดขึ้นเท็จ
SnailCoil

สิ่งนี้ยังมีประโยชน์มากขึ้นเมื่อต้องการทำงานกับลำดับชั้นที่ลึกกว่า
แม้แต่เมี่ยน

8

ฉันจะใช้ตัวดำเนินการไบนารีข้างตัวกรองวันที่ได้อย่างไร

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

คุณลอง:

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

3

ฉันชอบคำตอบนี้จริง ๆ ด้วย ngBind ข้อความเริ่มต้นของคุณสามารถอยู่ในองค์ประกอบขององค์ประกอบและจากนั้นถ้า ngBind ประเมินสิ่งที่ไม่ใช่โมฆะ / ไม่ได้กำหนดเนื้อหาของคุณจะถูกแทนที่โดยอัตโนมัติและทุกสิ่งมีความสุข

angularjs ตั้งค่าเริ่มต้นที่จะแสดงก่อนการประเมินผล


0

ใน cshtml ของคุณ

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

ในไฟล์ JS ของคุณอาจจะเป็น app.js

ด้านนอกของแอพควบคุมเพิ่มตัวกรองด้านล่าง

นี่คือ "mydate" เป็นฟังก์ชั่นที่คุณใช้ในการแยกวิเคราะห์วันที่ ที่นี่ "แอพ" เป็นตัวแปรที่มี angular.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;
    };
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.