AngularJs中的网格排序

我对AngularJs很新颖。我用ng-repeat得到了表格中的数据。现在，我正在尝试对表格列进行排序。它没有发生。请给我建议。AngularJs中的网格排序

<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" 
    } 
]

感谢。

来源

2017-04-07 Manoj

通话功能与'排序（.. 。）'不'排序{...}' – tanmay

@tanmya，请你多解释一下！ – Manoj

函数调用使用圆括号'（...）'不是大括号'{...}'所以它应该是'sort（'name'）' – tanmay

在视图中，由@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>

来源

2017-04-07 09:12:29

我已经完成了改变，它正在工作。谢谢。 – Manoj

AngularJs中的网格排序

回答

相关问题