我需要按 bool 值的特定分类顺序(字段名称不按字母顺序排列)提供动态排序，但我不知道如何继续。
当标题图标为绿色(关闭)(也是默认值)时，表格应按名称排序。单击标题图标时，它会变成黑色，排序顺序必须为 need_vote(如果为 true)、has_comment(如果为 true)、stale(如果为 true)、列表的其余部分，并且在每个选项中，多个限定符应按名称排序.
我创建了一个plunker到目前为止我所拥有的。
HTML
<body ng-controller="MainCtrl">
<table>
<tr>
<th style="text-align:center; width:100px;">
<span ng-show="pending_view"
ng-click="pending_view = 0"
class="glyphicon glyphicon-exclamation-sign"
style="color:#000000;"></span>
<span ng-show="!pending_view"
ng-click="pending_view = 1"
class="glyphicon glyphicon-exclamation-sign"
style="color:#009900;"></span>
</th>
<th>NAME</th>
</tr>
<tr ng-repeat="loan in loans | orderBy:'name'">
<td>
<!--NEED VOTE-->
<span ng-show="loan.need_vote" class="glyphicon glyphicon-exclamation-sign" style="color:#000099;"></span>
<span ng-show="!loan.need_vote" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
<!--HAS COMMENT-->
<span ng-show="loan.has_comment" class="glyphicon glyphicon-exclamation-sign" style="color:#e0a02d;"></span>
<span ng-show="!loan.has_comment" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
<!--STALE-->
<span ng-show="loan.stale" class="glyphicon glyphicon-exclamation-sign" style="color:#990000;"></span>
<span ng-show="!loan.stale" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
</td>
<td>{{loan.name}}</td>
</tr>
</table>
</body>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.pending_view = false;
$scope.loans = [
{need_vote: 0, has_comment: 0, stale: 0, name: 'Parker, Peter'},
{need_vote: 1, has_comment: 0, stale: 0, name: 'Banner, Bruce'},
{need_vote: 0, has_comment: 1, stale: 0, name: 'Prince, Diana'},
{need_vote: 0, has_comment: 0, stale: 0, name: 'Barton, Clink'},
{need_vote: 0, has_comment: 0, stale: 1, name: 'Wayne, Bruce'},
{need_vote: 0, has_comment: 1, stale: 1, name: 'Stark, Tony'},
{need_vote: 1, has_comment: 1, stale: 0, name: 'Romanoff, Natasha'},
{need_vote: 0, has_comment: 0, stale: 0, name: 'Murdock, Matt'},
{need_vote: 1, has_comment: 0, stale: 1, name: 'Blake, Donald'},
{need_vote: 1, has_comment: 1, stale: 1, name: 'Rogers, Steve'}
];
});
---更新--- 正常工作时，如果图标为绿色，则列表应按名称排序(正在工作!) 如果图标为黑色，则样本列表应按此顺序排列(所有 need_votes 按名称子排序，然后所有 has_comment 按名称子排序，然后所有陈旧的按名称子排序，最后其余按名称子排序 -
Banner, Bruce -- need_vote | name
Blake, Donald -- need_vote | name
Rogers, Steve -- need_vote | name
Romanoff, Natasha -- need_vote | name
Prince, Diana -- has_comment | name
Stark, Tony -- has_comment | name
Wayne, Bruce -- stale | name
Barton, Clint -- name
Murdock, Matt -- name
Parker, Peter -- name
排序但不正确 plunker
最佳答案
更新:
好吧，这是我们在这里遇到的完全不同的问题。它需要类似但扩展的解决方案。
考虑一下:您有多个字段，并且需要其中几个字段来确定排序顺序。在这种情况下，您可以创建复合排序属性并使用如下公式:
compoundSortField = 2**N * fieldN + 2**(N-1) * fieldN-1 ... field1
就您而言，它将是:
compoundSort = 4 * need_vote + 2 * has_comment + stale
您可以手动更改 json 或在每次 ajax 请求后使用真实数据进行更改。
接下来的事情是 orderBy 接受参数数组，这使得可以做到这一点:
<tr ng-repeat="loan in loans | orderBy:[myOrder, 'name']">
这意味着它将首先按 myOrder 排序，然后按名称排序。
您的 Controller 的代码将更改为:
$scope.orderOptions = ['name','-compoundSort']
您的按钮将在 name 和 -compoundSort 之间切换，使其按名称进行双重排序，或按降序复合排序然后按名称排序。
或者，您可以有两个数组:
$scope.simpleOrder = ['name']
$scope.complexOrder = ['-compoundSort', 'name']
$scope.myOrder = $scope.simpleOrder
并在它们之间切换myOrder。
在此处更新 plnkr:http://plnkr.co/edit/dS9PNFdCiuP2p6RPPha2?p=preview
这是您更新的 fiddle :http://plnkr.co/edit/EDHUJHxW5V2W5L8RHapn?p=preview
Filter orderBy 接受字符串作为参数，但您不需要提供字符串文字，它可以是范围内的变量(或 Controller 字段，如果您使用controllerAs等)
<tr ng-repeat="loan in loans | orderBy:myOrder">
假设您将有几个元素，例如
... ng-click='myOrder="name"'
... ng-click='myOrder="need_vote"'
为了让一个按钮执行选项循环，您可以这样做:
$scope.orderOptions = ['name', 'need_vote', ...]
$scope.myOrder = 'name'
$scope.orderOption = 0
$scope.nextOrder = function() {
$scope.orderOption ++
if ($scope.orderOption >= $scope.orderOptions.length) $scope.orderOption = 0
$scope.myOrder = $scope.orderOptions[$scope.orderOption]
}
...
ng-click='nextOrder()'
关于javascript - AngularJS:我如何根据动态条件进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25106891/