AngularJS: How to set a variable inside of a template?

Question

How can I avoid having the {{f = ...}} statement in the third line print out the content of forecast[day.iso]?

I want to avoid using forecast[day.iso].temperature and so on for every iteration.

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

It might not be an answer, but useful tip is to use {{f = forecast[day.iso];""}} as it would not print anything on the view. — Matt Leonowicz
– Matt Leonowicz, Commented Oct 28, 2015 at 7:57

PowerKiKi · Accepted Answer · 2019-04-15 23:29:58Z

197

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

Example: http://jsfiddle.net/coma/UV4qF/

edited Apr 15, 2019 at 23:29

PowerKiKi

4,7855 gold badges41 silver badges48 bronze badges

answered May 21, 2013 at 8:46

coma

16.7k4 gold badges53 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bentzy Over a year ago

If you want more then one variable just separate them with semicolon ';'

John Rix Over a year ago

Tip for the uninitiated... depending upon your template structure, you can end up with all records showing only the last value of your variable (in my case, Angular updated the substitutions on a subsequent digest cycle, since they're all bound to the same expression)! To combat this situation, you could assign the variable as a property of the current record being iterated on (if practical to your use case). In the above example, this would become ng-init="day.f = forecast[day.iso]"

Community · Accepted Answer · 2017-05-23 12:03:03Z

40

It's not the best answer, but its also an option: since you can concatenate multiple expressions, but just the last one is rendered, you can finish your expression with "" and your variable will be hidden.

So, you could define the variable with:

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

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Feb 19, 2016 at 18:53

Zanon

31k21 gold badges119 silver badges127 bronze badges

6 Comments

Daniel F Over a year ago

Is this a documented feature?

Zanon Over a year ago

@DanielF, I couldn't find. I just saw this comment, tested the idea, liked it and decided to add as an answer since it has more visibility and is harder to lose.

Zanon Over a year ago

@DanielF, just found this high voted answer that proposes the same solution. It's also without a doc link.

Zanon Over a year ago

@DanielF, I've updated my answer. I had to ask a question to understand it better. It's not a special feature. Just the behavior of concatenating expressions.

Ronny Over a year ago

This hack is especially useful when you want the expression to be bound to scope changes, rather than run once on init.

|

Collectives™ on Stack Overflow

AngularJS: How to set a variable inside of a template?

2 Answers 2

2 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Linked

Related