AngularJS ngtable无法正确显示数据

Question

I have an ngTable that is loaded with data that proceeds from a "Get" call to a webapi. Then I reload the table, but the data it is not being displayed.

This is the *.js file

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

This is my 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>

$data has no any data, but if I try {{dataTable}} I have all the data correctly loaded. Can anybody help me with this?, maybe there is something obvious that I am missing, but the point is that the table is creating the amount of rows and columns anyway but empty, it is very weird.

Answer 1

I think you are not storing $data anywhere. I cannot find $scope.data in your js file.

Answer 2

After long search I figured out the problem was pretty easy, was about the CamelCase notation. The problem is when you send info from a web api, if you don´t set custom notation for the parameters, they will be sent with the first letter capitalized. So, we have two chooses here, establish custom notation or just use in our HTML the first letter capitalized. I hope this will help somebody in the future!