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',加上一个'-'即可.