2017-04-05 67 views
1

我開始使用ng-tables,但是當我嘗試加載數組時,頁面上沒有任何內容出現。我的ng表沒有顯示任何東西

短暫出現{{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); 
    } 
}); 

}); 
+0

,如果你想顯示'equipas',嘗試'X在equipas' – Akashii

回答

0

我想你渲染HTML和腳本數據的方式是不正確的。如下所示更新您的代碼。 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> 

腳本

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

我怎樣才能讓酒吧出現在左邊選擇頁面?我只能在右側看到10 | 15 | 50 | –

+0

爲此,您需要重寫CSS。我已經更新了DEMO鏈接。請檢查它並讓我知道它是否適合你 – Vikash

+0

是不是Vikash。我正在討論選擇頁面的控件。例如:<< 1 | 2 | 3 >> –

0

由於清東指出的那樣,你只需要改變

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

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

jsfiddle