loading data to table using angular

Question

I must be missing something here, but why isn't my table loading with data using Ng-table? I tried following a example but it wont work for me.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example105-production</title>
<link href="style.css" rel="stylesheet" type="text/css">


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.js"></script>
<script src="script.js"></script>



</head>
<body ng-app="test">
<div ng-controller="ExampleController">
<table ng-table="tableParams">
            <thead>
            <tr>
            <th>Name</th>
            <th>Age</th>
            </tr>
            </thead>
            <tr ng-repeat="row in $data">
                <td>{{row.name}}</td>
            </tr>
        </table>
</div>
</body>
</html>

(function(angular) {
'use strict';
angular.module('test', ['ngTable'])
.controller('ExampleController', ['$scope', function($scope) {

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

  }]);
})(window.angular);

PLUNKR

You never defined NgTableParams.

str
– str

2016-03-17 12:11:05 +00:00
Commented Mar 17, 2016 at 12:11 — str
– str, Commented Mar 17, 2016 at 12:11

AdansK · Accepted Answer · 2016-03-17 12:27:12Z

1

You forgot to inject in your controller: NgTableParams.

And in dataset change to data as example:

$scope.table = new NgTableParams({}, { data: data });

See your example in plunker: http://plnkr.co/edit/b95EjalSTLd70YuB3ZHH?p=preview

answered Mar 17, 2016 at 12:27

AdansK

466 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Austin · Accepted Answer · 2016-03-17 12:11:28Z

0

2 changes needed here:

1) Put the data on the scope of the controller to share with the view:

$scope.data = [{name: 'Mor .....;

2) Use the name of the scope variable (data) in the html

<tr ng-repeat="row in data">

answered Mar 17, 2016 at 12:11

Austin

1,29110 silver badges19 bronze badges

Comments

Hassan Tariq · Accepted Answer · 2016-03-17 12:12:22Z

0

Make this change controller

   $scope.data = [{ name: "Moroni", age: 50 }, {name: "Moroni2", age: 502        }];

//   this.tableParams = new NgTableParams({}, { dataset: data });

and use

   ng-repeat="row in data"

answered Mar 17, 2016 at 12:12

Hassan Tariq

7407 silver badges15 bronze badges

Collectives™ on Stack Overflow

loading data to table using angular

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related