CODEWITHSUNDEEP
javascriptangularjsngtable
Massimo Petrus
Massimo Petrus

Reputation: 1891

Unable to make NgTable work with AngularJs 1.5

I'm trying to integrate NgTable with angularjs 1.5 in a component-based architecture (so, no old-style controllers).

The NgTable controls (filter, icons for sorting) appear, but they don't seem to work at all, so they don't filter and don't sort.

Here's my code

--- activity-list-module.js ---

 angular.module('activityList', ['ngTable']);

--- activity-list-component.js ---

(function(){
'use strict';
angular.
  module('activityList').
  component('activityList', {
    templateUrl: "app/activity-list/activity-list.html",
    controller: ['NgTableParams', function (NgTableParams) {
        var self=this;

          self.activitiesForm=[{id:0,description:"att0"},{id:1,description:"att1"},{id:2,description:"att2"}];
          self.tableParams = new NgTableParams({}, { dataset: self.activitiesForm});


    }]
  });
  })();

--- activity.list.html ----

  <div style="margin:20pt">
  <h3>Manage Activities</h3>
 <div style="margin:20pt">
<h3>Manage Activities</h3>
 <div class="row" style="margin-left:20pt" >
<table id="myViewTable" ng-table="$ctrl.tableParams" class="table" show-filter="true" class="table actTable" style="width:95%;table-layout: fixed;" >
<tbody>
<tr ng-repeat="projectActivity in $ctrl.activitiesForm track by projectActivity.id">
<td data-title="'Id'">{{projectActivity.id}}</td> 
<td data-title="'description'" filter="{ description: 'text'}" sortable="'description'">{{projectActivity.description}}</td>
</tr>
</tbody>
</table>
</div>
</div>

Of course the component is called using the tag <activity-list></activity-list> in another page.

I'm working with AngularJs 1.5.8 and ng-table 3.0.1.

I'm doing something wrong or there is an incompatibility between AngularJs >= 1.5 and ng-table ?

Here is the plnkr

PS In the last case, how can I do ? Is smarttable compatible with AngularJs 1.5 ?

Upvotes: 1

Views: 732

Answers (1)

Massimo Petrus
Massimo Petrus

Reputation: 1891

After raised an issue in ng-table GIT repo i got a working example from the creator of ng-table and i could have a look.

The point is in the use of controller variables, instead of a $data variable generated by ng-table. So, in the case of the 'new style' component the issue is solved changing

      <tr ng-repeat="projectActivity in $ctrl.activitiesForm track by projectActivity.id">

with 

     <tr ng-repeat="projectActivity in $data track by projectActivity.id">

In the case of the "old Style" controller it's solved changing 

     <tr ng-repeat="user in vm.data">

with 

     <tr ng-repeat="user in $data">

I don't like a lot this solution, because it add a kind of global, but it works.

EDIT

it works also using

$ctrl.tableParams.data (for Component Example) and vm.tableParams.data (for the Controller Example) which let me feel much better about.

Upvotes: 2

Related Questions