这是一个展示我正在尝试做的事情的笨蛋: http://plnkr.co/edit/mYFNBC6Z2XdpFD28XLdq?p=preview
我正在定义默认排序，并希望能够根据范围变量设置它，例如:
<th st-sort-default="{{order}}" st-sort="balance">balance</th>
但是，这似乎并没有发挥作用，而且我不确定这样做的正确方法。
Stackoverflow 说我需要包含代码，所以这里是来自 plunker 的 index.html 和 script.js:
angular.module('myApp', ['smart-table']).
controller('mainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
function createRandomItem() {
var firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000;
return {
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
$scope.displayed = [];
for (var j = 0; j < 50; j++) {
$scope.displayed.push(createRandomItem());
}
// Does not work
$scope.order = "";
// Works
//$scope.order = "reverse";
}]);.st-sort-ascent:before {
content: '\25B2';
}
.st-sort-descent:before {
content: '\25BC';
}
.table-container{
height:500px;
overflow-y:scroll;
}
.loading-indicator {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
text-align: center;
padding: 0.7em; }
.loading-indicator:before {
display: inline-block;
margin: 0 0.4em;
min-width: 1em;
min-height: 1em;
border-top: 4px solid #646464;
border-right: 4px solid #e6e6e6;
border-left: 4px solid #e6e6e6;
border-bottom: 4px solid #646464;
content: "";
-webkit-animation: halfspin 1s ease infinite;
-moz-animation: halfspin 1s ease infinite;
-o-animation: halfspin 1s ease infinite;
animation: halfspin 1s ease infinite;
border-radius: 100%; }
@-webkit-keyframes halfspin {
to {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); } }
@-moz-keyframes halfspin {
to {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); } }
@keyframes halfspin {
to {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); } }<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5a8e6f6f6c5b6abb7abb5" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a2ada4b6afa2b1eda9b083f2edf0edf4" rel="noreferrer noopener nofollow">[email protected]</a>" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.7/smart-table.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="table-container" st-table="displayed">
<table class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="age">age</th>
<th st-sort-default="{{order}}" st-sort="balance">balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.age}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>
</body>
</html>最佳答案
st-sort-default 中的空字符串将被忽略。来自 smart-table.debug.js 中的第 282 行:
if (attr.stSortDefault) {
sortDefault = scope.$eval(attr.stSortDefault) !== undefined ? scope.$eval(attr.stSortDefault) : attr.stSortDefault;
}
我建议您使用st-sort-default="default"。但是，任何字符串都会执行相同的操作。
第308行有一个针对reverse的具体检查:
if (sortDefault) {
index = attr.stSortDefault === 'reverse' ? 1 : 0;
sort();
}
请参阅此处的工作示例:http://plnkr.co/edit/HAeOqHaiMM9mUQrxa8eS?p=preview
关于javascript - Angular 智能表根据范围变量设置默认排序顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29522560/