AngularJS 在 orderBy 上动态指定标志答案

【问题标题】：AngularJS dynamically specify flag on orderByAngularJS 在 orderBy 上动态指定标志
【发布时间】：2015-05-21 07:50:03
【问题描述】：

我正在尝试根据所选的选择框值在 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。

【问题讨论】：

标签： javascript angularjs

【解决方案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

【讨论】：