ในคำแนะนำดั้งเดิมของ Angular คำแนะนำเหล่านี้ใช้เพื่อควบคุมว่าองค์ประกอบจะปรากฏขึ้นหรือไม่ NG-Show/Ng-hide/Ng-IF และ NG-switch
เรามักจะใช้มันในการเพิ่มประสิทธิภาพประสิทธิภาพเชิงมุม
มาดูความแตกต่างของพวกเขากันเถอะ
ในหมู่พวกเขา NG-show และ ng-hide เหมือนกันยกเว้นว่า NG-show แสดงเงื่อนไขเมื่อพวกเขาพบกันและ NG-hide ซ่อนเงื่อนไขเมื่อพวกเขาพบกัน เราจะไม่พูดถึง ng-hide ด้านล่าง
ng-show
ค่าบูลที่ได้รับจาก NG-show จะถูกทริกเกอร์เพื่อแสดงโหนด DOM เมื่อเป็นจริง เมื่อค่าของ NG-show เป็นเท็จคลาสของ ng-hide จะถูกเพิ่มลงในโหนด DOM และการแสดงออกของคลาสนี้คือ "แสดง: ไม่มี" เมื่อโหลด DOM โหนดทั้งหมดใน NG-Show จะถูกโหลด กล่าวคือ NG-show ซ่อนเท่านั้นและแสดงโหนด DOM ซึ่งหมายความว่าหากมีน้ำมันมากเกินไปในคำสั่ง NG-show แม้ว่าพวกเขาจะไม่แสดงมันโหนด DOM ที่พวกเขาอยู่จะยังคงแสดงผล
ng-if
NG-หากได้รับค่าบูล เมื่อค่าของมันเป็นเท็จโหนดมันจะไม่ถูกสร้างขึ้นหรือโหนด DOM ก่อนหน้าจะถูกทำลาย แม้ว่าโหนดนี้จะมีการผูก NG จำนวนมาก แต่ก็จะไม่ถูกดำเนินการ ดังนั้นในการพัฒนาโครงการหากเราไม่จำเป็นต้องโหลด DOM ในครั้งเดียวเราสามารถใช้ NG-IF เพื่อป้องกันไม่ให้เหตุการณ์ NG เกิดขึ้นดังนั้นจึงเร่งความเร็วในการโหลดของ DOM โดยเฉพาะอย่างยิ่งเมื่อทำซ้ำเอฟเฟกต์จะชัดเจนโดยเฉพาะอย่างยิ่งเมื่อข้อมูลแต่ละชิ้นมีโครงสร้างข้อมูลที่ซับซ้อน เมื่อค่าของมันเป็นจริงโหนด DOM จะถูกสร้างขึ้น
ดังนั้นหากคุณใช้คำแนะนำและเทมเพลตเพื่อแสดงข้อมูลเพิ่มเติมเช่นคลิกเพื่อแสดงข้อมูลรายละเอียดของรายการโปรดใช้ NG-IF (AngularJSV. 1.1.5 และใหม่กว่า) มันบล็อกการแสดงผล (เมื่อเทียบกับ NG-show)
การสวิตช์
การมีอยู่ของ NG-Switch ช่วยให้เรามีปัญหามากมาย (ควรบอกว่า Angular นั้นเป็นเช่นนี้) ตัวอย่างเช่นเราใช้วิธีดั้งเดิมในการสร้างแท็บ เราจำเป็นต้องวนซ้ำซ้ำแล้วซ้ำอีกจากนั้นตัดสินสถานะปัจจุบันแล้วดำเนินการสิ่งที่เกี่ยวข้อง การใช้ NG-switch ใน Angular นั้นง่ายมาก NG-Switch ต้องฟังตัวแปรที่แน่นอนก่อนและเนื้อหาใดที่จะแสดงด้านล่างเมื่อตัวแปรมีมูลค่า ดังที่แสดงไว้ข้างต้นเมื่อฟังตัวแปรเช่นประเภทเมื่อค่าของประเภทเท่ากับ 'AAA' พื้นที่นี้จะถูกสร้างและแสดง เมื่อค่าของประเภทเท่ากับ 'BBB' DOMS ทั้งหมดของ 'AAA' ก่อนหน้านี้จะถูกทำลายและจากนั้น 'BBB'Doms ทั้งหมดจะถูกสร้างและแสดง
ตัวอย่าง http://jsbin.com/hinehi/1/edit