Question

我有一组具有以下结构的movie个对象：

$scope.movies = [
  {title: "some title", rank: 13, imdbRating: 828},
  // ...
];

我希望按照title，rank或imdbRating - 使用<select>选择，以及使用按钮选择的asc / desc排序对其进行排序。这就是我所做的，然而，顺序似乎被重置。

<select ng-model="orderProp" id="input">
    <option  value="title">Alphabetical</option>
    <option  value="rank">Rank</option>
    <option  value="imdbRating">Rating</option>
  </select>
  <button ng-click="orderProp='+'-orderProp;orderProp='-'-orderProp; orderProp='+'+orderProp " >Asc
  </button>
  <button ng-click="orderProp='+'-orderProp;orderProp='-'-orderProp;orderProp='-'+orderProp" >Desc
  </button>
  <li ng-repeat="movie in movies | filter:search:strict | orderBy  [orderProp]">

我想要做的是选择一个选项来选择排序属性orderProp，如果用户点击“asc”或“desc”按钮来重新排序列表。

但是，排序不知道我正在排序的类别，因此无法正确执行asc或desc。如果单击asc / desc按钮，选项也会被视觉删除。

这有什么好的解决方案吗？

Answer 1

orderBy过滤器接受两个参数：1）属性，以及2）顺序：

<div ng-repeat="item in items | orderBy:prop:isReverse">

因此，在您的情况下，您需要在＆＃34; Asc＆＃34; /＆＃34; Desc＆＃34;的isReverse中设置ng-click。按钮相应。您已使用<select>正确设置了该属性。

<select ng-model="orderProp">
  <!-- as you do now -->
</select>

<button ng-click="isReverse = false">Asc</button>
<button ng-click="isReverse = true">Desc</button>

<li ng-repeat="movie in movies | orderBy: orderProp : isReverse">

在控制器中设置这些值的初始值也是个好主意：

$scope.isReverse = false; // for ascending order
$scope.orderProp = "title";

plunker - 举例说明

如何基于动态选择的属性设置数组的排序顺序（asc / desc）

1 个答案: