AngularJS templating links



上一個範例中的json還有一些資訊
  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改成這樣
  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

留言

熱門文章