Question

我在排序ng-table时遇到问题。我不确定这里有什么问题。点击标题后没有任何反应。

我有这个控制器

'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（）函数中的错误吗？

Answer 1

我必须删除<thead><thead>个元素，然后使用ng-title中的td，它就是为我做的。

<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>

角度ng表不排序

1 个答案: