AngularJS ngtable 无法正确显示数据答案

【问题标题】：AngularJS ngtable not displaying data correctlyAngularJS ngtable 无法正确显示数据
【发布时间】：2017-09-06 21:18:14
【问题描述】：

我有一个 ngTable，它加载了从“Get”调用到 webapi 的数据。然后我重新加载表，但它没有显示数据。

这是 *.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>

$data 没有任何数据，但如果我尝试 {{dataTable}} 我已正确加载所有数据。任何人都可以帮我解决这个问题吗？也许我缺少一些明显的东西，但关键是该表无论如何都在创建行和列的数量但为空，这很奇怪。

【问题讨论】：

你在哪里存储 $data 中的值，因为我没有看到任何数据存储在该变量中。我猜您将数据存储在控制器的 teamList 变量中。所以尝试在 teamList 中使用 ng-repeat=team
@ParthGoswami 如果我这样做，那么过滤器会起作用吗？

标签： javascript html angularjs ngtable

【解决方案1】：

我认为您没有将 $data 存储在任何地方。我在你的 js 文件中找不到 $scope.data。

【讨论】：

在我为 ngTable 看到的所有示例中，他们没有直接分配，getData 应该足够了。 Actullay 我在一个有角度的 mvc 项目中做到了，并且工作得很好。在这里，我将 web api 和 angular 分开了，我只用了 angular 几个月，所以也许有一些明显的东西我遗漏了。

【解决方案2】：

经过长时间的搜索，我发现问题很简单，与 CamelCase 表示法有关。问题是当您从 web api 发送信息时，如果您没有为参数设置自定义符号，它们将在发送时首字母大写。所以，我们在这里有两个选择，创建自定义符号或者只是在我们的 HTML 中使用首字母大写。我希望这对将来的人有所帮助！

【讨论】：