Your posts match “ filter ” tag:

AngularJS - order by

這次的code底加啦

我們常會有個需求,就是根據某種條件進行排序,譬如說:最新資訊、根據名稱排序、根據製造日期 ... etc

那麼,在AngularJS下該怎樣做到同樣的事情呢?這個時候,orderBy:就是你的救星,讓我們直接來看code。

HTML

  <div id="phones" ng-controller="PhonesController">
    <input type="text" ng-model="query" /><br />
    <select ng-model="orderBy">
      <option value="age">依照年齡</option>
      <option value="name">依照名稱</option>
    </select>
    <br />
    <ul>
      <li ng-repeat="phone in phones | filter:query | orderBy:orderBy">
        <p>{{phone.name}}</p>
      </li>
    </ul>
  </div>

這次我們設定了一個ng-model叫做orderBy,當然這名稱你自己自訂就好,只不過我們透過這個orderBy所回傳的值可以影響到ng-repeat的排序設定,至於該怎樣影響呢?在過濾器之後加上orderBy:orderBy字樣就好。後面的orderBy就是我們自己自訂的名字。

如此一來,我們就可以用這樣的方式進行簡單的資料排序,沒有問題的 (Y)