Angularjs if-then-else การสร้างในนิพจน์


109

ฉันสามารถใช้ if-then-else construction (ternary-operator) ในนิพจน์ angularjs ได้หรือไม่เช่นฉันมี function $ scope.isExists (item) ที่ต้องส่งคืนค่าบูล ฉันต้องการอะไรแบบนี้

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

ฉันรู้ว่าฉันสามารถใช้ฟังก์ชันที่ส่งคืนสตริงได้ฉันสนใจที่จะใช้โครงสร้าง if-then-else ในนิพจน์ ขอบคุณ.


3
ตรวจสอบng-switch
NilsH

3
ตั้งแต่ 1.2 สิ่งนี้ได้รับการสนับสนุนแล้ว
nilskp

คำตอบ:


219

นิพจน์เชิงมุมไม่รองรับตัวดำเนินการ ternary ก่อน 1.1.5 แต่สามารถจำลองได้ดังนี้:

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

ตัวอย่างเช่นสิ่งนี้จะได้ผล:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

อัปเดต: Angular 1.1.5 เพิ่มการสนับสนุนสำหรับตัวดำเนินการ ternary:

{{myVar === "two" ? "it's true" : "it's false"}}

&& จำเป็นต้องหนีหรือไม่?
0xcaff

@caffinatedmonkey ไม่คุณต้องไม่ คุณสามารถ (ถ้าเป็นไปได้สำหรับโปรเจ็กต์ของคุณ) ใช้ตัวดำเนินการ ternary เหมือนที่ฉันอธิบายไว้ในคำตอบสำหรับคำถามหัวข้อ
Sebastian

สิ่งที่เกี่ยวกับ @Sebastian <และ>เป็นผู้ประกอบการเปรียบเทียบ?
0xcaff

@caffinatedmonkey ไม่มีปัญหาเช่นกัน {{1> 0? true: false}} หรือ {{1> 0}} อะไรก็ได้ที่คุณต้องการ {{1> 0}} ทำงานใน 1.0.8 ได้เช่นกัน แต่ตัวดำเนินการด้านท้ายใช้ไม่ได้
Sebastian

นี่ยังคงเป็นคำตอบที่ดีเนื่องจากใช้งานได้ภายในการตั้งค่าของส่วนประกอบเชิงมุม - ui (ในขณะที่ตัวดำเนินการสามส่วนไม่ทำงานด้วยเหตุผลบางประการ) บางทีนี่อาจช่วยให้ใครบางคนพยายามตั้งค่าพารามิเตอร์เชิงมุม
Olga Gnatenko

39

คุณสามารถใช้ประกอบ ternary ตั้งแต่เวอร์ชัน 1.1.5 ขึ้นไปเช่นแสดงให้เห็นในนี้น้อยplunker (เช่นใน 1.1.5):

ด้วยเหตุผลทางประวัติศาสตร์(อาจจะขอให้ plnkr.co ลงด้วยเหตุผลบางประการในอนาคต)นี่คือรหัสหลักของตัวอย่างของฉัน:

{{true?true:false}}

ด้วยเหตุผลทางประวัติศาสตร์ (อาจจะขอให้ plnkr.co ลงด้วยเหตุผลบางอย่างในอนาคต) นี่คือรหัสหลักของตัวอย่างของฉัน:{{true?true:false}}
Sebastian

1
สิ่งที่ฉันกำลังมองหาขอบคุณเกือบจะใช้ตัวกรองเพื่อทำสิ่งนี้
อิฐไม่เปลี่ยนรูป

1
@IgorCh: คุณอาจต้องการอัปเดตคำตอบที่ยอมรับ :)
Răzvan Flavius ​​Panda

25

คุณสามารถใช้ ng-show เช่น:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

สำหรับการทดสอบที่ซับซ้อนมากขึ้นคุณสามารถใช้คำสั่ง ng-switch:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>

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

ใช่ฉันรู้เกี่ยวกับฟังก์ชันนี้ซึ่งสามารถช่วยได้ แต่ฉันไม่ต้องการเพิ่ม div เพิ่มเติมในเอกสาร แต่ขอขอบคุณด้วย
IgorCh

0

ซึ่งสามารถทำได้ในบรรทัดเดียว

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

การใช้งานในtdแท็ก:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>

0

ฉันกำลังพยายามตรวจสอบว่ามีคีย์อยู่ในอาร์เรย์ในลักษณะเชิงมุมหรือไม่และมาถึงที่นี่สำหรับคำถามนี้ ในตัวดำเนินการ ternary Angularjs 1.4 ของฉันทำงานเหมือนด้านล่าง

{{ CONDITION ? TRUE : FALSE }}

ด้วยเหตุนี้จึงมีคีย์อาร์เรย์ฉันจึงทำการตรวจสอบ JS อย่างง่าย

แนวทางที่ 1: {{ array['key'] !== undefined ? array['key'] : 'n/a' }}

แนวทางที่ 2: {{ "key" in array ? array['key'] : 'n/a' }}

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.