ng-orderby

首先,添加了<select> 標籤:

 

<select ng-model="orderProp">

  <option value="name">Alphabetical</option>

  <option value="age">Newest</option>

</select>

其次,在filter中添加了orderBy:

 

 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

    {{phone.name}}

    <p>{{phone.snippet}}</p>

  </li>

所以,根據angularjs的思想,一是model改變(可能是用戶手動選擇下拉框導致的),那麼根據數據綁定原則(data-binding),view也將適時進行改變.

 

orderBy api:https://docs.angularjs.org/api/ng/filter/orderBy

 

orderBy Usage(用法)

In HTML Template Binding(在HTML中的用法)

{{ orderBy_expression | orderBy : expression : reverse}}

In java script(在JS中的用法)

$filter('orderBy')(array, expression, reverse)

上面的例子是在HTML中用的,默認string類型的數據是按照字母表中數據排序的,而number數字類型的數據是按照數字大小進行排序的.

 

如果想要倒序,那麼可以在上面的option value='-name',加上一個'-'即可.