我对 AngularJs 很陌生。 我使用 ng-repeat 获取表中的数据。 现在，我正在尝试对表列进行排序。它没有发生。 请给我建议。
<html ng-app="authorsApp">
<div ng-controller="myAuthors">
<table class="table table-striped table-hover">
<tr>
<th ng-click="sort{'name'}">
Name
<span class="glyphicon glyphicon-sort" ng-show="sortKey == 'name'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort{'department'}">
Deparment
<span class="glyphicon glyphicon-sort" ng-show="sortKey == 'department'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
<tr ng-repeat="auther in authors | filter: search | orderBy:sortKey:reverse">
<td>{{auther.name}}</td>
<td>{{auther.department}}</td>
</tr>
</table>
</div>
<script src="Scripts/angular.js"></script>
<script src="Assets/js/authors-01.js"></script>
</html>
js文件如下
var app = angular.module("authorsApp", []);
app.controller("myAuthors", function ($scope, $http) {
$scope.authors = [];
$http.get('Assets/js/authors-01.json').then(function (response) {
$scope.authors = response.data;
});
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
});
json 文件如下
[
{
"name": "Manoj",
"department": "Design"
},
{
"name": "Srikant",
"department": "Business"
}
]
提前致谢。
最佳答案
在 View 中，如 @tanmay 的评论中设置，您应该调用 sort() 而不是 sort{}
代码示例:
angular
.module("authorsApp", [])
.controller("myAuthors", function ($scope) {
// Authors for code example...
$scope.authors = [{"name": "Manoj","department": "Design"},{"name": "Srikant","department": "Business"}];
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse = !$scope.reverse;
}
});th { cursor: pointer; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="authorsApp" ng-controller="myAuthors">
<table class="table table-striped table-hover">
<tr>
<th ng-click="sort('name')">
Name
<span class="glyphicon glyphicon-sort" ng-show="sortKey == 'name'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('department')">
Deparment
<span class="glyphicon glyphicon-sort" ng-show="sortKey == 'department'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
<tr ng-repeat="auther in authors | filter: search | orderBy:sortKey:reverse">
<td>{{auther.name}}</td>
<td>{{auther.department}}</td>
</tr>
</table>
</div>关于javascript - AngularJs 中的网格排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43273973/