MaazKhan47 MaazKhan47 - 20 days ago 11
AngularJS Question

NgTable not showing data, Only headers are shown

I am trying to run simple code for ngTable but its showing only the headers and no data is shown. I am using the latest documentation for ngTable.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<!DOCTYPE html>
<html>

<head>
<title></title>
</head>

<body>
<div ng-app="myApp" ng-controller="ctrl">
<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>
</div>
</body>

</html>
<script type="text/javascript">
angular.module("myApp", ["ngTable"])
.controller('ctrl', ['NgTableParams', function(NgTableParams) {
var vm = this;
var data = [{
name: "Moroni",
age: 50
}, {
name: "Moroni",
age: 50
}, {
name: "Moroni",
age: 50
}];
vm.tableParams = new NgTableParams({}, {
dataset: data
});

}])
</script>

Answer

You are mixing up Controller and controller as syntax together,

HTML

<div ng-controller="ctrl">
      <table ng-table="tableParams" class="table" show-filter="true">
        <tbody>
          <tr ng-repeat="row in $data">
            <td data-title="'Name'"  sortable="'name'">{{ row.name }}</td>
            <td data-title="'Age'"  sortable="'age'">{{ row.age }}</td>
          </tr>
        </tbody>
      </table>
    </div>

Controller

var app = angular.module('ngTableApp', ['ngTable'])
  .controller('ctrl', function($scope, $filter, $q, NgTableParams) {
    var data = [{
      name: "Moroni",
      age: 50
    }, {
      name: "Moroni",
      age: 50
    }, {
      name: "Moroni",
      age: 50
    }];
    $scope.tableParams = new NgTableParams({
      page: 1,
      count: 10
    }, {
      data: data
    });

  })

DEMO

Comments