2013年7月15日 星期一

ng-repeat是多胞胎產生器!

在 Angularjs的世界裡,我覺得ng-repeat這玩意兒應該可以算是前5名常用的功能吧!

 photo credit: Spigoo via photopin cc
沒錯! 就像上圖一樣! 只要有了ng-repeat一次生出多胞胎再也不用大粒汗小粒汗!

所有重複性的table資料、重複性的list資料、重複性的div資料....(我現在不斷重複也是...= =

都可以透過ng-repeat來迅速完成!!

但是, 我們都知道雙胞胎不管長的多像, 還是有些微的不同!

這可能是老天爺為了要給辛苦的媽媽好分辨用吧! 就感心耶!!

所以啦! 當你的孩兒們(model裡的資料)都長的一模一樣的時候,

oh my god~ 神的審判之槌就會降臨,F12按下去,Error之槌就會共尬力咪咪冒冒...$#&$@!

比如說,我的model data 長的如下:

$scope.model.chlidren=["大寶","大寶","大寶","大寶"];

html長的如下:

<ul>
    <li ng-repeat="model.children">
</ul>

這時候F12審判之神會告訴你:

My dear , Duplicates in a repeater are not allowed.
(翻譯: 親帶的,你的多胞胎因長得一模一樣有基因改造之疑慮所以予以駁回!)

蝦密! 我黃豆吃太多了嗎? 政府沒有把關! 現在到底還有什麼可以吃...

沒關係! 在Angularjs 的世界裡,好險我們不用肝臟來代謝毒素,也不用害怕毒素會殘留在體內!

只要把<li ng-repeat="model.children">這句改成,<li ng-repeat="model.children track by $index">即可!

我是這理解的,孩子長得一模一樣沒關係,給他們各自不一樣的「胎記」就好,而這胎記就是$index啦!

神奇唄!

PS: Angularjs世界是可以這樣啦! 但現實世界怎麼辦?  現在還有什麼可以吃的啦 >< 喔我的天..


沒有留言:

張貼留言