AngularJS:テンプレート内に変数を設定する方法は?


90

{{f = ...}}3行目のステートメントでコンテンツが出力されないようにするにはどうすればよい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 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/


31
複数の変数が必要な場合は、セミコロン ';'で区切ります。
ベンジー2014年

初心者向けのヒント...テンプレート構造によっては、すべてのレコードに変数の最後の値のみが表示される可能性があります(私の場合、Angularはすべてにバインドされているため、後続のダイジェストサイクルで置換を更新しました同じ表現)!この状況に対処するために、反復される現在のレコードのプロパティとして変数を割り当てることができます(ユースケースで実用的な場合)。上記の例では、これは次のようになりますng-init="day.f = forecast[day.iso]"
John Rix 2017年

35

これは最良の答えはありませんが、オプションでもあります。複数の式を連結できますが、最後の式だけがレンダリングされるため、式を終了する""と変数が非表示になります。

したがって、次のように変数を定義できます。

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

これは文書化された機能ですか?
ダニエルF

@DanielF、見つかりませんでした。私はこのコメントを見、アイデアをテストし、気に入って、可視性が高く、失うのが難しいため、回答として追加することにしました。
Zanon 2016

@DanielF、同じ解決策を提案するこの高投票の回答を見つけました。また、ドキュメントリンクもありません。
Zanon 2016

@DanielF、回答を更新しました。私はそれをよりよく理解するために質問をしなければなりませんでした。これは特別な機能ではありません。式を連結する動作だけです。
Zanon 2016

8
このハックは、式をinitで一度実行するのではなく、スコープの変更にバインドする場合に特に役立ちます。
ロニー2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.