使用 ng-repeat、AngularJS 的空表行答案

【问题标题】：Empty table rows with ng-repeat, AngularJS使用 ng-repeat、AngularJS 的空表行
【发布时间】：2017-06-20 22:57:23
【问题描述】：

我有您可以提交的输入字段，并且您输入的数据被插入到数据库中。然后使用 ng-repeat 将这些数据循环到一个表中：

    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th>Sträcka</th>
                <th>Tid</th>
                <th>Jämför</th>
             </tr>
        </thead>
            <tr ng-repeat="info in test"><td>{{info.stracka}}</td><td>{{info.tid}}</td><td><input type="checkbox" id="{{info.id}}" class="checkboxfisk" ng-click="testa(info.id)"></tr>
        </table>

问题是，当数据库表为空时，你第一次提交数据，点击提交后，会打印出3个空TR的行。我使用 firebug 来调试它，当我将鼠标悬停在空的 TR 行上时，HTML 看起来像这样：

<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Sträcka</th>
<th>Tid</th>
<th>Jämför</th>
</tr>
</thead>
<tbody>
<tr class="ng-scope" ng-repeat="info in test">
<td class="ng-binding"></td>
<td class="ng-binding"></td>
<td>
<input id="" class="checkboxfisk" type="checkbox" ng-click="testa(info.id)">
</td>
</tr>
<tr class="ng-scope" ng-repeat="info in test">
<td class="ng-binding"></td>
<td class="ng-binding"></td>
<td>
</tr>
<tr class="ng-scope" ng-repeat="info in test">
<td class="ng-binding"></td>
<td class="ng-binding"></td>
<td>
</tr>
</tbody>
</table>
<form class="ng-pristine ng-invalid ng-invalid-required" novalidate="" ng-submit="submitForm(userForm.$valid)" name="userForm">

如你所见，有类名为 ng-binding 的 td。这是什么？谁能帮帮我？

这是我的控制器：

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   
    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data.data;
    });

    $scope.form = {};
    $scope.checkboxes = [];

    $scope.testa = function(id) {
        $scope.checkboxes.push(id);
    };

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                console.log($scope.form);
            }).error(function(data, status) {

            });
        }
    };
});

编辑：问题出在我的后端。我忘记添加执行mysql查询后返回的参数。

【问题讨论】：

能否在http调用成功函数中显示console.log($scope.test)的输出
@AjayBeniwal：我刚刚看到问题出在我的后端，以及查询是如何返回到 Angular 的。问题现已解决。

标签： javascript html angularjs html-table

【解决方案1】：

我看到了两种可能性。

首先，您应该在 $http 调用之前初始化您的测试范围变量（以确保即使 http 请求失败也可以初始化它）。然后创建一个方法 updateTest 将在提交表单成功时调用（更新测试变量）。

你的代码应该是这样的：

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   
    // METHOD to update test items
    updateTest = function() {
        $http.get($rootScope.appUrl + '/nao/test/test')
            .success(function(data, status, headers, config) {
                $scope.test = data.data;
        });
    };

    // init variables
    $scope.form = {};
    $scope.checkboxes = [];
    $scope.test = [];

    $scope.testa = function(id) {
        $scope.checkboxes.push(id);
    };

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                console.log($scope.form);
                // update test item (to get back newly created one)
                updateTest();
            }).error(function(data, status) {

            });
        }
    };

    // first test items update
    updateTest();
});

【讨论】：