CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeatngtable
Joshua Cook
Joshua Cook

Reputation: 3

angularjs ng-table/ng-repeat rows not loading

I am trying to follow the tutorial Here on using ng-Table. If I download the whole example from Git then it loads fine but trying to follow even the simplest example myself then the Column headers and filters load but there are no rows? If I add another row in the HTML manually it does appear so the issue seems to either be with the data binding or the ng-repeat. There are no errors showing in the console.

enter image description here

Example Code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
    <link rel="stylesheet" ; href="https://unpkg.com/[email protected]/bundles/ng-table.css">
    <script src="https://unpkg.com/[email protected]/bundles/ng-table.js"></script>
</head>
<body>

    <div ng-app="MyApp" ng-controller="MyCtrl">

        <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>
        var app = angular.module("MyApp", ["ngTable"]);

        app.controller('MyCtrl', function ($scope, NgTableParams) {
            var self = this;
            var data = [{ name: "Moroni", age: 50 } /*,*/];
            self.tableParams = new NgTableParams({}, { dataset: data });
        });

    </script>
</body>
</html>

Upvotes: 0

Views: 1073

Answers (3)

Dei Revoledo
Dei Revoledo

Reputation: 175

This is ng table, the problem is you are using the controller as vm, just remove the vm or put controller as vm and it's work.

 <table ng-table="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>

Upvotes: 0

Deividas
Deividas

Reputation: 6507

You haven't specified your controller reference.

Change the code to <div ng-app="MyApp" ng-controller="MyCtrl as vm"> and it will work as you expect it.

Working example: http://codepen.io/DeividasK/pen/qrWqey?editors=1010

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

You didn't assign your object in scope

try this below code instead of your code

    app.controller('MyCtrl', function ($scope, NgTableParams) {
        var self = this;
         self.data  = [{ name: "Moroni", age: 50 } /*,*/];
        self.tableParams = new NgTableParams({}, { dataset:  self.data });
    });

Upvotes: 0

Related Questions