CODEWITHSUNDEEP
angularjshtmlngtable
Rizan Zaky
Rizan Zaky

Reputation: 4682

ng-table doesn't load any data from $data

I'm trying to load data to an ng-table in the following way,

The HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="ng-table.min.css">
</head>
<body ng-app="myApp" ng-controller="mycont as vm">

<div class="container">
    <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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="ng-table.min.js"></script>

<script src="table.js"></script>
</body>

The Angular Script (in table.js)

angular.module("myApp", ["ngTable"])

.controller('mycont', ['ngTableParams', function(ngTableParams) {
    var self = this;

    var data = [
        {name: "Moroni", age: 50},
        {name: "Alan", age: 45},
        {name: "Tony", age: 36}
    ];

    self.tableParams = new ngTableParams({}, { dataset: data});
}])

but I get a table, even with the filters, but without any data.

Please help me out...

Upvotes: 0

Views: 1520

Answers (3)

damd
damd

Reputation: 6967

I copied your code to Plunker and it works fine, the only changes I made were the URLs to the JavaScript and CSS files for ngTable.

Double-check your JavaScript console and network log for errors.

Since I need to include code to include links to Plunker, these are the URLs I used:

<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

Upvotes: 2

fodma1
fodma1

Reputation: 3535

Looking at the source code of the intro code I noticed that NgTableParams is with uppercase N.

Upvotes: 0

Amit Sirohiya
Amit Sirohiya

Reputation: 333

Try this -

You can't use $ in scope variable names on view, go through Angular docs carefully.

Change $data to vm.tableParams.dataset

<table ng-table="vm.tableParams" class="table" show-filter="true">
        <tr ng-repeat="user in vm.tableParams.dataset">
            <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                {{user.name}}
            </td>
            <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
</table>

Upvotes: 0

Related Questions