Angularの多次元配列でよくハマる

6306 ワード
ng-repeat Object 配列 Angular 配列 テキストリンク

Angularでjsonから値を取得して表示させるケースで、ちょいちょいハマるのでメモ。
これが正しい使い方なのかが不明。参照は自己責任にてお願いします

通常の配列からのng-Repeat

javascript
arraySample_A = ["1","2","3"]
html
SPAN ng-repeat="sampleA in arraySample_A track by $index"

keyのない配列からの取得には、track by $index を入れる必用がある

二次元配列からのng-repeat

javascript
arraySample_B = ["1","2","3"],["a","b","c"],["あ","い","う"]
html
TR ng-repeat="sampleB in arraySample_B"
 TD ng-repeat="sampleC in sampleB track by $index"

sampleBは3回ループする
1. ["1","2","3"]
2. ["a","b","c"]
3. ["あ","い","う"]

sampleCも3回ループする
1. "1"
2. "2"
3. "3"
keyのない配列からの取得には、track by $index を入れる必用がある

key:valueの取得(Object）

javascript
arraySample_D = [like:apple,love:pen]
html
{{ arraySampleD.like }}{{arraySampleD.love }}

アポーペンになる
keyで指定をすれば、valueが表示される

javascript
arraySample_E = [like:apple,love:pen],[like:peach,love:pen],[like:banana,love:pen]
html
TD ng-repeat="ppap in arraySample_E"
{{ arraySampleD.like }}{{arraySampleD.love }}

アポペン、ピチペン、バナナペンと表示される
多次元配列を行うケースでは key:value がとてもありがたい

key:valueのng-repeat（Object)

javascript
arraySample_E = [like:apple,love:pen],[like:peach,love:pen],[like:banana,love:pen]
html
SPAN ng-repeat="(key, value) in arraySample_E"
{{ value }}

アポペン、ピチペン、バナナペンと表示される
keyを動的に持ちたいケースでは、(key,value)を使うことで
汎用的にデータを受け止めることができる

Python類属性アクセスの魔法方法
標準ライブラリのアクセサリーlru_Cacheと新しいsingledispatch