我有一个table这很好。排序正在发生，但并不完全如我所愿。AngularJS排序表
我的问题是每次在不同的列上排序时，表格都默认为升序排列。因为它代表了代码的工作方式是，它会升序和降序之间由于之间的这种变化交替，虚实：
$scope.sortReverse = false;
我想是添加的东西，使其默认为false，如果你改变你正在排序的列。下面是一个plnkr。无论发生什么，你都会发现它会在上升和下降之间交替。我需要的是，当您按另一列排序时，即使它在当时正在下降，它也会变为升序。
本质上我相信需要第三位的逻辑适用，但我还不能解决它。
任何想法，将不胜感激。
http://plnkr.co/edit/LrnPj1nx4sdQD8F9ctKB?p=preview
当您更改排序，反向标志设置为false。看看setSortingColumn函数。
var app = angular.module("myApp", ['ui.bootstrap']);
app.filter('unique', function() {
return function(arr, field) {
var o = {},
i, l = arr.length,
r = [];
for (i = 0; i < l; i += 1) {
o[arr[i][field]] = arr[i];
}
for (i in o) {
r.push(o[i]);
}
return r;
};
})
app.controller("maincontroller", function($scope) {
$scope.query = {};
$scope.quer = {};
$scope.queryBy = '$';
$scope.isCollapsed = true;
$scope.selectedRefs = [];
$scope.setSortingColumn = function(sortType) {
if ($scope.sortType == sortType)
$scope.sortReverse = !$scope.sortReverse;
else {
$scope.sortType = sortType;
$scope.sortReverse = false;
}
};
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({
trigger: "hover",
placement: "top",
delay: {
show: 500,
hide: 100
}
});
});
$scope.projects = [{
a: "G",
b: "123",
c: "1",
d: "D6",
e: "O1",
f: "B"
}, {
a: "R",
b: "406",
c: "2",
d: "D5",
e: "O2",
f: "B"
}, {
a: "G",
b: "519",
c: "3",
d: "D4",
e: "O3",
f: "P"
}, {
a: "G",
b: "867",
c: "4",
d: "DK",
e: "O4",
f: "B"
}, {
a: "R",
b: "654",
c: "5",
d: "D2",
e: "O5",
f: "P"
}, {
a: "R",
b: "321",
c: "6",
d: "D1",
e: "O6",
f: "P"
}, {
a: "G",
b: "123",
c: "7",
d: "D6",
e: "O1",
f: "B"
}, {
a: "R",
b: "456",
c: "8",
d: "D5",
e: "O2",
f: "B"
}, {
a: "G",
b: "789",
c: "9",
d: "D4",
e: "O13",
f: "P"
}, {
a: "G",
b: "987",
c: "10",
d: "D3",
e: "O4",
f: "B"
}, {
a: "R",
b: "654",
c: "11",
d: "D2",
e: "O5",
f: "P"
}, {
a: "G",
b: "321",
c: "12",
d: "D1",
e: "O6",
f: "P"
},
{
a: "G",
b: "301",
c: "13",
d: "D1",
e: "O6",
f: "P"
},
];
$scope.sortType = 'c';
$scope.sortReverse = false;
});<!doctype html>
<html lang="en" ng-app="myApp" ng-controller="maincontroller">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<script data-require="[email protected]" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="divfix">
<br>
<div class="col-md-10">
<div id="tbl">
<table class="table table-hover table-bordered" id="projlist">
<thead>
<tr>
<th class="status borderless" id="brdrhide"></th>
<th tabindex="30" style="border:2px solid #C7CED1;" id="refwidth1" class="refwidth" ng-keypress="setSortingColumn('b')" ng-click="setSortingColumn('b')">Ref
<span ng-show="sortType != 'b'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'b' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'b' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>
<th tabindex="40" style="border:2px solid #C7CED1;" class="servwidth" ng-keypress="setSortingColumn('c')" ng-click="setSortingColumn('c')">Service
<span ng-show="sortType != 'c'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'c' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'c' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>
<th tabindex="50" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('d')" ng-click="setSortingColumn('d')">Domain
<span ng-show="sortType != 'd'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'd' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'd' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>
<th tabindex="60" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('e')" ng-click="setSortingColumn('e')">Service Owner
<span ng-show="sortType != 'e'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'e' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'e' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>
<th tabindex="70" style="border:2px solid #C7CED1;" ng-keypress="setSortingColumn('f')" ng-click="setSortingColumn('f')">Lifecycle
<span ng-show="sortType != 'f'" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'f' && !sortReverse" alt="Sort A to Z" class="glyphicon glyphicon-chevron-down glyphiconsort tablepoint pull-right"></span>
<span ng-show="sortType == 'f' && sortReverse" alt="Sort Z to A" class="glyphicon glyphicon-chevron-up glyphiconsort tablepoint pull-right"></span></th>
</tr>
</thead>
<tbody id="tbl6">
<tr id="tbl7" class="tt" ng-class="{even: $even, odd: $odd}" data-toggle="tooltip" title="Click for more information on {{x.c}}." ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:sortType:sortReverse">
<td id="brdrhide1" ng-class="{'glyphicon glyphicon-alert icon-success': x.a == 'R'}"><b ng-if="x.a != 'R'"></b>
<td id="refwidth" class="shrink">{{x.b}}</td>
<td class="shrink"><u>{{x.c}}</u></td>
<td class="shrink">{{x.d}}</td>
<td class="shrink">{{x.e}}</td>
<td class="shrink">{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
请把张贴的答案，在当前形式的代码是很难阅读 – LionC
一个很好的解决方案之前，正确地格式化你的代码的时候，我会记住这一点的未来。谢谢您的帮助！ – TheLimeTrees
@LionC完成。这只是复制粘贴从问题。 – Artiom