Mon ng-table ne montre rien

Question

Je commence à travailler avec ng-tables, mais quand j'essaye de charger le tableau, rien n'apparaît sur la page.

apparaît brièvement {{x.Name}} et {{}} x.Country

Toute suggestion?

Merci

Voir

<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

Je pense que la façon dont vous êtes rendu les données en HTML et script est incorrect . Mettez à jour votre code comme indiqué ci-dessous. 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); 
    } 
    }); 
}); 

Answer 2

Comme Thanh Tùng a souligné, il vous suffit de changer

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

à

<tr ng-repeat="x in equipas"> 

jsfiddle