2013-05-21 13 views
78

3行目の{{f = ...}}ステートメントがforecast[day.iso]の内容を印刷しないようにするにはどうすればよいですか?AngularJS:テンプレート内で変数を設定する方法は?

すべての繰り返しで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> 
+2

{{fは=予想[day.iso]を;「」}}それと同じようにビューに何も印刷しない。 –

答えて

160

使用ngInithttp://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/

+27

複数の変数をセミコロンで区切りたい場合は ';' – bentzy

+0

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

24

それはnot the best answerだが、そのオプションも:あなたは複数の式を連結することができますが、ちょうど最後の1がレンダリングされるので、 ""で式を終了すると、変数が非表示になります。

だから、あなたが変数を定義することができます:それは答えではないかもしれませんが、便利なヒントが使用する

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

になります。これは文書化された機能ですか? –

+0

@DanielF、私は見つけることができませんでした。私はちょうど[これを見た(http://stackoverflow.com/questions/16665319/how-to-set-a-variable-inside-of-a-template#comment54563800_16665319)コメントは、アイデアをテストし、それを気に入って、それはより多くの可視性を持ち、失うのがより難しいので、答えとして追加してください。 – Zanon

+0

@DanielFは、同じ解決法を提案するこの最高の投票[回答](http://stackoverflow.com/a/28432472/1476885)を見つけました。ドキュメントリンクもありません。 – Zanon

関連する問題