AngularJS templating links

上一個範例中的json還有一些資訊

view plaincopy to clipboardprint

1. [   
2. {   
3. ...   
4. "id": "motorola-defy-with-motoblur",   
5. "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",   
6. "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",   
7. ...   
8. },   
9. ...   
10. ]  

現在來做不換頁，卻可以更換url的方法，這個在ajax用很兇的page會很方便，可以再不換頁的情況下，紀錄先前瀏覽的位置。

再來將html改成這樣

view plaincopy to clipboardprint

1. <ul class="phones">  
2.     <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">  
3.         <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>  
4.         <a href="#/phones/{{phone.id}}">{{phone.name}}</a>  
5.         <p>{{phone.snippet}}</p>  
6.     </li>  
7. </ul>  

AngularJS在這邊的href內帶入了每個手機的id #/phones/{{phone.id}}，用ng-src取代原本img的src，因為AngularJS是整個網站載完後才開始編譯，用ng-src可以避免還沒載入完html發生的錯誤。

Demo

Templating Links & Images