มีการแสดงออกที่ซับซ้อนใน ng-hide / ng-show หรือไม่?


180

ฉันต้องการที่จะทำ:

ng-hide="!globals.isAdmin && mapping.is_default"

falseแต่การแสดงออกเสมอที่จะประเมิน

$scopeฉันไม่ต้องการที่จะกำหนดฟังก์ชั่นพิเศษใน


1
ไวยากรณ์นั้นใช้งานได้สำหรับฉันและฉันใช้บ่อย หากประเมินผลfalseคุณอาจต้องตรวจสอบค่าเหล่านั้นอีกครั้ง เป็นไปได้ว่าวัตถุ " undefined
กลม

อ่านความคิดเห็นของฉันด้านล่างคำตอบ
พอล

แค่คำใบ้ - ถ้าคุณใช้วิธีการควบคุมแทนคุณสามารถผ่านการประเมินในตัวดีบักได้!
Dimitry K

คำตอบ:


212

ใช้วิธีการควบคุมหากคุณต้องการเรียกใช้รหัส JavaScript โดยพลการหรือคุณสามารถกำหนดตัวกรองที่ส่งคืนจริงหรือเท็จ

ฉันเพิ่งทดสอบ (ควรทำก่อน) และสิ่งที่ชอบng-show="!a && b"ทำงานตามที่คาดไว้


4
คุณพูดถูก ปัญหาคือว่าธง isAdmin เป็นประเภท 'สตริง' มากกว่า 'บูลีน'
พอล

121

ng-show/ ng-hideยอมรับbooleanค่าเท่านั้น

สำหรับการแสดงออกที่ซับซ้อนเป็นการดีที่จะใช้คอนโทรลเลอร์และขอบเขตเพื่อหลีกเลี่ยงภาวะแทรกซ้อน

ด้านล่างหนึ่งจะทำงานได้ (มันไม่ได้แสดงออกที่ซับซ้อนมาก)

ng-show="User=='admin' || User=='teacher'"

องค์ประกอบที่นี่จะปรากฏใน UI เมื่อเงื่อนไขสองข้อใดข้อหนึ่งคืนจริง (หรือการทำงาน)

เช่นนี้คุณสามารถใช้นิพจน์ใด ๆ ก็ได้


12

วิธีนี้จะได้ผลถ้าคุณไม่มีการแสดงออกมากเกินไป

ตัวอย่าง: ng-show="form.type === 'Limited Company' || form.type === 'Limited Partnership'"

สำหรับนิพจน์ที่มากกว่านี้ให้ใช้คอนโทรลเลอร์


1
ฉันไม่คิดว่าคำสั่งของคุณถูกต้อง: This will work if you do not have too many expressions.แม้ว่าฉันยอมรับว่าควรทำในตัวควบคุมแทน
Rahul Desai

7

โดยทั่วไปฉันพยายามหลีกเลี่ยงการแสดงออกด้วย ng-show และ ng-hide เนื่องจากถูกออกแบบมาเป็นบูลีนไม่ใช่เงื่อนไข ถ้าฉันต้องการทั้งเงื่อนไขและตรรกะบูลีนฉันชอบที่จะใส่ตรรกะตามเงื่อนไขโดยใช้ ng-if เป็นการตรวจสอบครั้งแรกจากนั้นเพิ่มการตรวจสอบเพิ่มเติมสำหรับตรรกะบูลีนที่มี ng-show และ ng-hide

Howerver หากคุณต้องการใช้เงื่อนไขสำหรับ ng-show หรือ ng-hide นี่คือลิงค์ที่มีตัวอย่าง: การแสดงแบบมีเงื่อนไขโดยใช้ ng-if, ng-show, ng-show, ng-hide, ng-include, ng-switch


2

คำตอบข้างต้นเหล่านี้บางส่วนไม่ได้ผลสำหรับฉัน แต่เป็นเช่นนั้น ในกรณีที่คนอื่นมีปัญหาเดียวกัน

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