AngularJS : 템플릿 내부에 변수를 설정하는 방법은 무엇입니까?

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

javascript angularjs ng-init

— 다니엘 F
소스

대답이 아닐 수도 있지만 유용한 팁은 뷰에 아무것도 인쇄하지 않으므로 {{f = Forecast [day.iso]; ""}}를 사용하는 것입니다.

— Matt Leonowicz 2015 년

답변:

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/

— 혼수
소스

하나 이상의 변수를 원하면 세미콜론 ';'으로 구분하십시오.

— bentzy

시작되지 않은 팁 ... 템플릿 구조에 따라 변수의 마지막 값만 보여주는 모든 레코드로 끝날 수 있습니다 (제 경우 Angular는 다음 다이제스트주기에서 대체 항목을 모두 업데이트했습니다. 같은 표현)! 이 상황을 해결하기 위해 반복되는 현재 레코드의 속성으로 변수를 할당 할 수 있습니다 (사용 사례에 실제적인 경우). 위의 예에서 이것은 다음과 같습니다ng-init="day.f = forecast[day.iso]"

— John Rix

그것은의 가장 좋은 대답하지 ,하지만 또한 옵션 : 여러 표현을 연결할 수 있지만, 단지 마지막 렌더링되기 때문에, 당신은 당신의 발현을 완료 할 수 있습니다 ""당신의 변수가 숨겨집니다.

따라서 다음을 사용하여 변수를 정의 할 수 있습니다.

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

— 자논
소스

문서화 된 기능입니까?

— Daniel F

@DanielF, 찾을 수 없습니다. 방금 이 댓글을 보고 아이디어를 테스트하고 마음에 들어하며 더 많은 가시성을 제공하고 잃기 어렵 기 때문에 답변으로 추가하기로 결정했습니다.

— Zanon

@DanielF, 방금 동일한 솔루션을 제안하는 높은 투표 응답 을 찾았습니다 . 또한 문서 링크가 없습니다.

— Zanon

@DanielF, 내 대답을 업데이트했습니다. 나는 그것을 더 잘 이해하기 위해 질문 을해야했다. 특별한 기능이 아닙니다. 표현식을 연결하는 동작입니다.

— Zanon

이 해킹은 표현식이 init에서 한 번 실행되는 대신 범위 변경에 바인딩되도록 할 때 특히 유용합니다.

— Ronny