角度 ng 表不排序

angular ng-table does not sort

本文关键字：排序 ng 角度      更新时间：2023-09-26

我在对ng表进行排序时遇到问题。我不确定这里出了什么问题。当我单击标题时没有任何反应。

我有这个控制器

'use strict';
import $ from 'jquery';
import angular from 'angular';
export default function(app) {
  app.controller('applicationsCtrl', function($scope, ngTableParams, applicationsFactory, $filter) {
    var vm = this;
    var apps = [{title: "Moroni", clientId: 50, blackListed: "no"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"}, 
                {title: "train", clientId: 30, blackListed: "Yes"},
                {title: "train", clientId: 30, blackListed: "Yes"} /*,*/];

$scope.tableParams = new ngTableParams({
                page: 1,
                count: 10
            }, {
                total: apps.length, 
                getData: function ($defer, params) {
                    $scope.data = params.sorting() ? $filter('orderBy')(apps, params.orderBy()) : apps;
                    $scope.data = apps.slice((params.page() - 1) * params.count(), params.page() * params.count());
                    $defer.resolve($scope.data);
                }
            });  
  });
}

这是我的部分视图的样子

<div ng-controller="applicationsCtrl as vm" class="applications container-fluid">
  <div class="applicationsJumbotron jumbotron table-responsive" loading-container="vm.tableParams.settings().$loading">
    <button class="btn btn-default btn-lg" type="button" ng-click="vm.registerApplication()">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Register Applications 
    </button>
    <br/>
    <table ng-table="tableParams" class="table table-condensed">
      <thead>
        <tr class="appTableTh">
          <th>Application Title</th>
          <th>Application ClientId</th>
          <th>Blacklist Status</th>
        </tr>
      </thead>
      <tbody class="container-fluid">
        <tr ng-repeat="application in $data" ng-class-even="'appTblEvn'" ng-class-odd="'appTblOdd'">
          <td sortable="'title'">
            {{application.title}}
          </td>
          <td sortable="'clientId'">
            {{application.clientId}}
          </td>
          <td sortable="'blackListed'">
            {{application.blackListed}}
          </td>    
        </tr>
      </tbody>
    </table> 
  </div>
</div>

控制台中没有错误消息，所以我不确定我在这里寻找什么。我的 getData（） 函数中有错误吗？

我不得不删除<thead><thead>元素并只使用td中的ng-title，这对我来说就是这样做的。 

<div ng-controller="applicationsCtrl as vm" class="applications container-fluid">
  <div class="applicationsJumbotron jumbotron table-responsive" loading-container="vm.tableParams.settings().$loading">
    <button class="btn btn-default btn-lg" type="button" ng-click="vm.registerApplication()">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Register Applications 
    </button>
    <br/>
    <table ng-table="tableParams" class="table table-condensed">
        <tr ng-repeat="application in $data" ng-class-even="'appTblEvn'" ng-class-odd="'appTblOdd'">
          <td data-title="'Title'" ng-title="'title'" sortable="'title'">
            {{application.title}}
          </td>
          <td>
            {{application.clientId}}
          </td>
          <td>
            {{application.blackListed}}
          </td>    
        </tr>
    </table> 
  </div>
</div>
相关文章：