2013年2月17日 星期日

AngularJS 雙向綁定



angular要做資料的排序也很簡單,像這樣在html內加上另一個ng-model
  1. Search: <input ng-model="query">  
  2. Sort by:   
  3.         <select ng-model="orderProp">  
  4.             <option value="name">Alphabetical</option>  
  5.             <option value="age">Newest</option>  
  6.         </select>  
  7. <ul>  
  8.     <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"">  
  9.         {{phone.name}}   
  10.         <p>{{phone.snippet}}</p>  
  11.     </li>  
  12. </ul>  

在原本的json內新增一個屬性
  1. function PhoneListCtrl($scope) {   
  2.   $scope.phones = [   
  3.     {"name""Nexus S",   
  4.      "snippet""Fast just got faster with Nexus S.",   
  5.      "age": 0},   
  6.     {"name""Motorola XOOM™ with Wi-Fi",   
  7.      "snippet""The Next, Next Generation tablet.",   
  8.      "age": 1},   
  9.     {"name""MOTOROLA XOOM™",   
  10.      "snippet""The Next, Next Generation tablet.",   
  11.      "age": 2}   
  12.   ];   
  13.   
  14.   $scope.orderProp = 'age';   
  15. }  
orderProp是預設的排序選項,如果要反序,只要在後面加orderBy:orderProp:true就可以了。

Demo
參考:
Two-way Data Binding
AngularJS入门教程04:双向绑定
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...