角度ng-table無法排序

我在排序ng-table時遇到問題。我不確定這裏有什麼問題。當我點擊標題時什麼也沒有發生。角度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（）函數中的錯誤嗎？

來源

2016-03-08 Ortho Home Defense

你能提供一個你調用'getData（）'，特別是你傳入的'params'對象的例子嗎？ – Cameron

我實際上並沒有專門調用它，這就是所有的代碼。我應該在哪裏調用它？ –

我沒有從服務器獲取數據，所以我只有mockdata到目前爲止。 –

我不得不刪除<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>

來源

2016-03-09 15:36:39

角度ng-table無法排序

回答

相關問題