-1

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>
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
MaazKhan47
  • 811
  • 1
  • 11
  • 22

2 Answers2

1

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

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
1

problem was with your data variable , which your were accessing in view.

angular.module("myApp", ["ngTable"])
    .controller('ctrl', ['NgTableParams','$scope', function(NgTableParams,$scope) {
        var vm = this;
        var data = [{
            name: "Moroni1",
            age: 50
        }, {
            name: "Moroni2",
            age: 50
        }, {
            name: "Moroni3",
            age: 50
        }];
      $scope.data = data;
        vm.tableParams = new NgTableParams({}, {
            dataset: data
        });

    }])
<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>
Jigar7521
  • 1,549
  • 14
  • 27