orderBy筛选器只能工作一次

orderBy filter works only once

本文关键字:一次 工作 筛选 orderBy      更新时间:2023-09-26

根据用户的选择,尝试按升序或降序对数字数组进行排序。

这是我的代码-

Order by: 
<select ng-model="orderCriteria">
    <option value="false">ASC</option>
    <option value="true">DESC</option>
</select>
<table border="2">
<th>Number</th>
    <tr ng-repeat="num in [1, 5, 3, 6, 45, 20, 7, 2] | filter: query | orderBy:num:orderCriteria">
        <td>{{num}}</td>
    </tr>
</table>

加载页面时,数字会自动按升序排列。当我打开下拉列表并选择DESC或ASC时,表格会将其顺序更改为降序(无论我选择什么)。

从那一刻起,我的选择中有什么都无关紧要,顺序是按降序排列的!

我做错了什么?

谢谢!

您的代码不起作用的原因是,选择框中的true/false值是在筛选表达式中总是产生"true"的字符串。

你可以试试这样的东西:

<tr ng-repeat="num in [1, 5, 3, 6, 45, 20, 7, 2] | orderBy:num:(orderCriteria == 'true')">
     <td>{{num}}</td>
</tr>

要轻松更改订单方向,只需使用+/-修饰符:

<tr ng-repeat="num in numbers | orderBy: orderCriteria">
    <td>{{num}}</td>
</tr>

其中orderCriteria现在变为:

<select ng-model="orderCriteria">
    <option value="+">ASC</option>
    <option value="-">DESC</option>
</select>

来自orderBy关于谓词表达式的文档:

表达式可以选择性地以+或-作为前缀,以控制升序或降序(例如,+name或-name)。如果没有提供属性(例如"+"),则数组元素本身用于比较where排序。

演示:http://plnkr.co/edit/IS4jDKTtlQd6Pg9VSxVU?p=preview