Search code examples
javascripthtmlangularjsangularjs-ng-repeatngtable

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/ng-table@4.0.0/bundles/ng-table.css">
    <script src="https://unpkg.com/ng-table@4.0.0/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>
Solution

  • 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