AngularJS: Como definir uma variável dentro de um modelo?


91

Como posso evitar que a {{f = ...}}declaração na terceira linha imprima o conteúdo de forecast[day.iso]?

Eu quero evitar o uso forecast[day.iso].temperaturee assim por diante para cada iteração.

<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
Pode não ser uma resposta, mas uma dica útil é usar {{f = forecast [day.iso]; ""}}, pois não imprimiria nada na visualização.
Matt Leonowicz

Respostas:


190

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>

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


31
Se você quiser mais de uma variável, separe-as com ponto e vírgula ';'
bentzy

Dica para os não iniciados ... dependendo da estrutura do seu modelo, você pode acabar com todos os registros mostrando apenas o último valor da sua variável (no meu caso, o Angular atualizou as substituições em um ciclo de resumo subsequente, uma vez que estão todos vinculados a a mesma expressão)! Para combater essa situação, você pode atribuir a variável como uma propriedade do registro atual que está sendo iterado (se for prático para o seu caso de uso). No exemplo acima, isso se tornariang-init="day.f = forecast[day.iso]"
John Rix

35

Não é a melhor resposta , mas também é uma opção: como você pode concatenar várias expressões, mas apenas a última é renderizada, você pode terminar sua expressão com ""e sua variável será ocultada.

Então, você pode definir a variável com:

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

Este é um recurso documentado?
Daniel F de

@DanielF, não consegui encontrar. Acabei de ver este comentário, testei a ideia, gostei e resolvi adicionar como resposta, pois tem mais visibilidade e é mais difícil de perder.
Zanon

@DanielF, acabou de encontrar esta resposta votada que propõe a mesma solução. Também não tem um link de doc.
Zanon

@DanielF, atualizei minha resposta. Tive que fazer uma pergunta para entender melhor. Não é um recurso especial. Apenas o comportamento de concatenar expressões.
Zanon

8
Este hack é especialmente útil quando você deseja que a expressão seja vinculada às mudanças de escopo, em vez de ser executada uma vez no init.
Ronny
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.