AngularJS: จะตั้งค่าตัวแปรภายในเทมเพลตได้อย่างไร?


90

ฉันจะหลีกเลี่ยงไม่ให้{{f = ...}}ข้อความในบรรทัดที่สามพิมพ์เนื้อหาของforecast[day.iso]?

ฉันต้องการหลีกเลี่ยงการใช้forecast[day.iso].temperatureและอื่น ๆ สำหรับการทำซ้ำทุกครั้ง

<div ng-repeat="day in forecast_days">
  {{$index}} - {{day.iso}} - {{day.name}}
  {{f = forecast[day.iso]}}
  Temperature: {{f.temperature}}<br>
  Humidity: {{f.humidity}}<br>
  ...
</div>

3
อาจไม่ใช่คำตอบ แต่เคล็ดลับที่มีประโยชน์คือใช้ {{f = Forecast [day.iso]; ""}} เพราะจะไม่พิมพ์อะไรลงไปบนมุมมอง
Matt Leonowicz

คำตอบ:


189

ใช้ngInit : https://docs.angularjs.org/api/ng/directive/ngInit

<div ng-repeat="day in forecast_days" ng-init="f = forecast[day.iso]">
  {{$index}} - {{day.iso}} - {{day.name}}
  Temperature: {{f.temperature}}<br>
  Humidity: {{f.humidity}}<br>
  ...
</div>

ตัวอย่าง: http://jsfiddle.net/coma/UV4qF/


31
หากคุณต้องการมากกว่านั้นให้แยกตัวแปรด้วยอัฒภาค ';'
bentzy

เคล็ดลับสำหรับผู้ที่ไม่ได้ฝึกหัด ... ขึ้นอยู่กับโครงสร้างเทมเพลตของคุณคุณสามารถลงเอยด้วยระเบียนทั้งหมดที่แสดงเฉพาะค่าสุดท้ายของตัวแปรของคุณ (ในกรณีของฉัน Angular อัปเดตการแทนที่ในรอบการสรุปย่อยที่ตามมาเนื่องจากทั้งหมดถูกผูกไว้กับ สำนวนเดียวกัน)! เพื่อต่อสู้กับสถานการณ์นี้คุณสามารถกำหนดตัวแปรให้เป็นคุณสมบัติของเรกคอร์ดปัจจุบันที่กำลังทำซ้ำอยู่ (หากใช้ได้จริงกับกรณีการใช้งานของคุณ) ในตัวอย่างข้างต้นสิ่งนี้จะกลายเป็นng-init="day.f = forecast[day.iso]"
John Rix

35

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

ดังนั้นคุณสามารถกำหนดตัวแปรด้วย:

{{f = forecast[day.iso]; ""}}

คุณลักษณะนี้เป็นเอกสารหรือไม่
Daniel F

@DanielF ไม่พบ ฉันเพิ่งเห็นความคิดเห็นนี้ทดสอบความคิดชอบและตัดสินใจเพิ่มเป็นคำตอบเนื่องจากมีการมองเห็นมากขึ้นและเสียยากกว่า
Zanon

@DanielF เพิ่งพบคำตอบที่ได้รับการโหวตสูงซึ่งเสนอวิธีแก้ปัญหาเดียวกัน นอกจากนี้ยังไม่มีลิงก์เอกสาร
Zanon

@DanielF ฉันอัปเดตคำตอบของฉันแล้ว ฉันต้องถามคำถามเพื่อทำความเข้าใจให้ดีขึ้น มันไม่ใช่คุณสมบัติพิเศษ เพียงแค่พฤติกรรมของการเชื่อมต่อนิพจน์
Zanon

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