AngularJS ngtable不能正确显示数据
问题描述:
我有一个ngTable,加载了从“Get”调用进入webapi的数据。然后我重新加载表格,但没有显示数据。AngularJS ngtable不能正确显示数据
这是* js文件
rdapp.controller('scoringTableCtrl', ['$location', '$scope', '$http', 'ngTableParams', '$filter',
function($location, $scope, $http, ngTableParams, $filter) {
$scope.teamList = [];
$http({
method: 'GET',
url: 'http://localhost:34592/api/scoringTable',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then(function(success) {
$scope.teamList = success.data;
addFieldsForSorting();
$scope.dataTable.reload();
}, function(error) {
console.log(error);
});
$scope.resolveHTML = function(position) {
if (position == 1 || position == 2 || position == 3) return 'champions';
if (position == 4) return 'champions-prev';
if (position == 5 || position == 6) return 'europa-league';
if (position == 18 || position == 19 || position == 20) return 'decline';
return '';
}
function addFieldsForSorting() {
// Add named properties for every stat value in recipients array, used for sorting the grid.
// Take value from vitalStats array, use alertIds to match between alpha keys and numeric keys.
$scope.teamList.forEach(function(team) {
for (var property in team) {
if (!team.hasOwnProperty(property)) {
continue;
}
if (property == 'name') {
continue;
}
if (property == 'position') {
continue;
}
var prop = 'sort_' + property;
team[prop] = -(team[property]);
}
team['sort_name'] = team.name;
team['sort_position'] = team.position;
});
}
$scope.dataTable = new ngTableParams({
page: 1, // show first page
count: 20, // count per page
sorting: {
sort_position: 'asc' // initial sorting
}
}, {
counts: [],
total: $scope.teamList.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var requestData = $scope.teamList;
var orderedData = params.sorting() ? $filter('orderBy')(requestData, params.orderBy()) : requestData;
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}
]);
这是我的html:
<div class="position-view" style="position:relative; top:100px;">
<table ng-table="dataTable" class="table table-bordered table-border-important" ng-class="rec_spinner">
<tbody class="text-center">{{$data.length}}
<tr ng-repeat="team in $data">
<td class="{{resolveHTML(team.position)}}" data-title="''" sortable="'sort_position'">
{{team.position}}
</td>
<td data-title="'Clasificación'" sortable="'sort_name'">
{{team.name}}
</td>
<!--Total Stats-->
<td data-title="'PJ'" sortable="'sort_pj'">
{{team.pj}}
</td>
<td data-title="'PG'" sortable="'sort_pg'" >
{{team.pg}}
</td>
<td data-title="'PE'" sortable="'sort_pe'" >
{{team.pe}}
</td>
<td data-title="'PP'" sortable="'sort_pp'" >
{{team.pp}}
</td>
<td data-title="'GF'" sortable="'sort_gf'">
{{team.gf}}
</td>
<td data-title="'GC'" sortable="'sort_gc'">
{{team.gc}}
</td>
<td data-title="'PT'" sortable="'sort_pt'">
{{team.pt}}
</td>
</tr>
</tbody>
</table>
$数据没有任何数据,但如果我尝试{{dataTable的}}我已经正确加载了所有数据。任何人都可以帮我解决这个问题吗?也许有些东西显而易见,但我的意思是,表格无论如何都是创建行和列的数量,但它是空的,这很奇怪。
答
经过长时间的搜索,我发现问题很简单,就是关于CamelCase符号。问题是当你从web api发送信息时,如果你没有为这些参数设置自定义符号,它们将以大写的第一个字母发送。 所以,我们在这里有两个选择,创建自定义符号或者仅仅用在我们的HTML大写的第一个字母。我希望这将有助于未来的人!
答
我认为你没有在任何地方存储数据。我无法在您的js文件中找到$ scope.data。
+0
在我看到的ngTable的所有示例中,它们不直接分配,getData应该足够。 Actullay我在一个有角度的mvc项目中完成了它,并且工作得很好。在这里,我已经分离了网页api和角度,我一直只有角度几个月,所以也许有一些明显的我失踪了。 – dayanrr91
你在哪里存储$数据的值,因为我没有看到任何数据存储在该变量中。我想你正在将数据存储在控制器中的teamList变量中。所以请尝试在teamList –
@ParthGoswami中使用ng-repeat = team如果我这样做了,那么过滤器就会工作? – dayanrr91