Question

我需要在两个不同的datagrid列上实现2种不同的排序操作，通过使用2个不同的选择框变得艰难。我尝试使用下面的代码，因为我刚接触到这个我无法解决这个问题......

In HTML:

<select  ng-model="reverse">
          <option  value="false">Top Sr</option>
          <option  value="true">Bottom Sr</option>
</select>

 <select  ng-model="reverse">
          <option  value="false">Top Rank</option>
          <option  value="true">Bottom Rank</option>
</select>


In datagrid:

<tr ng-repeat="items in empList | orderBy : ['-TR', 'SR']" >


In controller:

In controller : $scope.reverse = false;

Answer 1

我建议您使用以下解决方案：

<select  ng-model="sr">
          <option  value="+sr">Top Sr</option>
          <option  value="-sr">Bottom Sr</option>
</select>

 <select  ng-model="tr">
          <option  value="+tr">Top Rank</option>
          <option  value="-tr">Bottom Rank</option>
</select>

然后你应该将以下ng-repeat语句应用于表：

<tr ng-repeat="items in empList | orderBy : [tr, sr]" >

并在控制器中设置默认值：

$scope.sr = '+sr';
$scope.tr = '+tr';

您应该将'sr'和'tr'替换为您要排序的对象（empList中的单个元素）属性名称。

当您通过选择select中的其他选项修改$ scope变量时，它会自动评估为正确的orderBy语句，例如：

 <tr ng-repeat="items in empList | orderBy : [sr, tr]" >

此处已更新plunker。我已将属性名称修改为'tr'，现在它可以正常工作，但我不确定这是否是你想要的 - ＆gt;目前它将按第一列排序，只有当值相等时，它才会将对象与另一个属性（即'tr'）进行比较。

更新：

如果您希望始终按照与最近更改的下拉列表相关联的属性进行排序，则需要更改位（another plunker）：

1）添加此初始化：

$scope.srRecentlyChanged = true;

2）在选择更改时添加事件：

<select  ng-model="sr" ng-change="srRecentlyChanged = true;">
          <option  value="+sr">Top Sr</option>
          <option  value="-sr">Bottom Sr</option>
</select>

 <select  ng-model="tr" ng-change="srRecentlyChanged = false;">
          <option  value="+tr">Top Rank</option>
          <option  value="-tr">Bottom Rank</option>
</select>

3）修改orderBy表达式：

<tr ng-repeat="items in empList | orderBy : (srRecentlyChanged? sr : tr)" >

多个排序操作由2个不同的选择框触发

1 个答案: