Question

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

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

例如，＆＃39;按字母顺序排列＆＃39;订单，该标志必须是:false，但对于＆＃39; date＆＃39; （最近的），标志必须是: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 to：

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

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

AngularJS动态指定orderBy上的标志

1 个答案: