NgTable not showing data, Only headers are shown

Question

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 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

Answer 2

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>

NgTable not showing data, Only headers are shown

Question

2 answers

solution1
1 ACCPTED 2016-11-16 05:47:10

solution2
1 2016-11-16 05:49:00

NgTable not showing data, Only headers are shown

Question

2 answers

solution1 1 ACCPTED 2016-11-16 05:47:10

solution2 1 2016-11-16 05:49:00

solution1
1 ACCPTED 2016-11-16 05:47:10

solution2
1 2016-11-16 05:49:00