user500468 user500468 - 5 months ago 20
HTML Question

Empty table rows with ng-repeat, AngularJS

I have input fields that you can submit, and the data that you entered is inserted into an database. This data is then looped out in a table with 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>


The problem is that, When the database table is empty, and you are submiting data for the first time, 3 empty TR's rows are printed out, after you have hit submit. I used firebug to debug this, and the HTML look like this when I hover on the empty TR-rows:

<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">


As you can see, there are td's with classname of ng-binding. What is this? Can anyone help me?

Here is my controller:

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) {

});
}
};
});


EDIT: The problem was in my backend. I've have forgotten to add a parameter that is returned after that the mysql query is executed.

Answer Source

I see two possibilities.

In first, you should initialize your test scope variable before the $http call (to ensure it is initialized even if http request fails). And then create a method updateTest which will be called on succes of the submit form (to update test variable).

Your code should be like that:

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