My ng-table is not showing anything

Question

I'm starting to work with ng-tables, but when I try to load the array, nothing appears on the page.

Appears briefly {{x.Name}} and {{x.Country}}

Any suggestion?

Thank you

View

<div ng-app="ruyApp" ng-controller="equipasCtrl" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">

<div class="row">

    <table class="table" ng-table="equipasTable" show-filter="true">
            <tr ng-repeat= "x in data">   
                <td data-title="'Nome'" >
                    {{x.Nome}}
                </td>
                <td data-title="'Country'">
                    {{x.Country}}
                </td>
                <td>
                    <a href="Equipas/Edit/{{x.EquipaID}}"> Editar</a> |
                    <a href="Equipas/Details/{{x.EquipaID}}"> Detalhes</a> |
                    <a href="Equipas/Delete/{{x.EquipaID}}"> Eliminar</a>                       
                </td>
            </tr>


    </table>
    </div>

Script

var app = angular.module('ruyApp', ['ngTable']);

app.controller('equipasCtrl', function ($scope) {   

$scope.equipas = [{ Nome: "Benfica", Country: "Portugal"},
    { Nome: "Porto", Country: "Portugal" },
    { Nome: "Real Madrid", Country: "Spain" }];


$scope.equipasTable = new NgTableParams({
    page: 1,
    count: 2
}, {

    total: $scope.equipas.length,
    getData: function ($defer, params) {
        $scope.data = $scope.equipas.slice((params.page() - 1) * params.count(), params.page() * params.count());
        $defer.resolve($scope.data);
    }
});

});

Answer 1

I think the way you are rendering the data in HTML and Script is not correct. Update your code as shown below . DEMO

VIEW

<div ng-app="ruyApp" ng-controller="equipasCtrl" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">
  <table ng-table="equipasTable" class="table" show-filter="true">
    <tbody>
      <tr ng-repeat="row in $data">
        <td data-title="'Name'"  sortable="'name'">{{ row.Nome }}</td>
        <td data-title="'Country'"  sortable="'age'">{{ row.Country }}</td>
        <td>
            <a href="Equipas/Edit/{{x.EquipaID}}"> Editar</a> |
            <a href="Equipas/Details/{{x.EquipaID}}"> Detalhes</a> |
            <a href="Equipas/Delete/{{x.EquipaID}}"> Eliminar</a>                       
        </td>
      </tr>
    </tbody>
  </table>
</div>

Script

var app = angular.module('ruyApp', ['ngTable']);

app.controller('equipasCtrl', function($scope, $filter, $q, NgTableParams) {
 $scope.equipas = [{
  Nome: "Benfica",
  Country: "Portugal"
 }, {
  Nome: "Porto",
  Country: "Portugal"
 }, {
  Nome: "Real Madrid",
  Country: "Spain"
 }];

 $scope.equipasTable = new NgTableParams({
  page: 1,
  count: 10
 }, {
  total: equipas.length, 
  getData: function($defer, params) {
   $scope.data = equipas.slice((params.page() - 1) * params.count(), params.page() * params.count());
   $defer.resolve($scope.data);
  }
  });
});