javascript - AngularJS 在 orderBy 上动态指定标志

Question

我正在尝试根据所选的选择框值在 AngularJS 中执行 orderBy 操作。

我遇到的问题是根据所选值更改可选的 :true 或 :false 标志。

例如，“字母顺序”，该标志必须为 :false，但对于“日期”(最近)，该标志必须为 :true >.

我已经尝试对范围选项中的标志进行硬编码，但仍然不起作用。

html

<div>
  <label>Country filter</label>
  <input type="text" ng-model="countryFilter" />

  <label>Order by</label>
  <select ng-model="selectedOrder" ng-options="option for option in options"></select>
</div>

<ul>
  <li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>    
</ul>

app.js

var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope) {

  // order by options
  $scope.options = ['country', 'address', 'date'];

  // all countries
  $scope.details = [{
    id:1, country:'Finland', address:'Mainstreet 2', date:'2015-05-02'
  },{
    id:2, country:'Mexico', address:'Some address', date:'2015-05-05'
  },{
    id:3, country:'Canada', address:'Snowroad 45', date:'2015-03-02'
  }];
});

这是一个plunker .

Answer 1

我建议将您的订单选项从字符串更改为对象，其中包括是否应为此订单反转列表的信息:

$scope.options = [{value : 'country', reversed : false}, {value : 'address', reversed : false}, {value : 'date', reversed : true}];

并且 ng-repeat 为:

<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder.value:selectedOrder.reversed">{{ detail }}</li>    

http://plnkr.co/edit/JXtHa2jXUy7Y5BsvsdL9?p=preview