Question

在这个plunk中，我有一个动态创建列的ngTable。这些列是可排序和可过滤的，但是当单击标题时，排序不起作用，过滤器也不起作用。有什么想法吗？

的Javascript

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {

   $scope.cols = [ 
        {nm:'uid', title:'User ID', sortable: 'uid', filter:{uid: 'text'}}, 
        {nm:'ugr', title: 'Group ID', sortable: 'ugr',filter:{ugr: 'text'}} 
      ];


      $scope.data = [ 
        { uid: 'aaa',ugr: '222'},
        { uid: 'bbb', ugr: '111'}
      ];

      $scope.tableParams = new NgTableParams({dataset: $scope.data});

});

HTML

<div ng-controller="myCtl" ng-app="app">

  <table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-hover">
    <tr ng-repeat="row in data">
      <td ng-repeat="col in cols">{{row[col.nm]}}</td>
    </tr>
  </table>

</div>

Answer 1

1) Add references to AngularJS. EG:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

2)Add references to ngTable's javascript and css files. EG:

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">
<script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"></script>

3)Where you declare your app module, add ngTable:

angular.module("myApp", ["ngTable"]);

4)In your html file within the controller where you plan to use ng-table, add:

<table ng-table="vm.tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            {{user.name}}</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
            {{user.age}}</td>
    </tr>
</table>

5)In your javascript file within the controller where you plan to use ng-table, declare:

var self = this;
var data = [{name: "Moroni", age: 50} /*,*/];
self.tableParams = new NgTableParams({}, { dataset: data});

demo enter link description here

排序和过滤在ngTable

1 个答案: