我的ng-table没有显示任何内容

Question

我开始使用ng-tables，但是当我尝试加载数组时，页面上没有任何内容。

简要显示{{x.Name}}和{{x.Country}}

有什么建议吗？

谢谢

查看

<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>

脚本

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

正如ThanhTùng指出的那样，你只需要改变

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

到

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

jsfiddle

Answer 2

我认为您在HTML和脚本中呈现数据的方式不正确。更新您的代码，如下所示。 DEMO

查看

<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>

<强>脚本

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);
  }
  });
});