AkhilEsh Khajuria AkhilEsh Khajuria - 6 months ago 15
AngularJS Question

Nothing being displayed in place of AngularJS expression

I am trying to fetch data from mysql using php and trying to pass the data in json format to angularjs so that I can display data in table.

HTML code is:

<body ng-app="myModule">
<div class="row">
<div class="col-lg-12 text-center">
<div ng-controller="myController">
<table class="table">
<thead>
<tr>
<th>email</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
</table>
</div>

</div>
</div>
<!-- /.row -->

</div>




AngularJS code is:

var app = angular
.module("myModule", [])
.controller("myController", function ($scope,$http) {
$http.post('http://enrolin.in/test/login.php')
.then(function(response){
$scope.employees=response.data;
}); });


Working php link that outputs json is : http://enrolin.in/test/login.php
Working link of table is http://enrolin.in/test/

But when I try to load the html. It does not load any data from the database.

I tried to view it in console, looks like ng-repeat is repeated 6 times that is exactly the number of rows in database that means data is imported but is not being displayed somehow

I tried to view it in console, looks like ng-repeat is repeated 6 times that is exactly the number of rows in database that means data is imported but is not being displayed somehow

Answer

The problem seems to be in your HTML.

<tr ng-repeat="employee in employees"></tr>
    <td>{{employee.username}}</td>
    <td>{{employee.id}}</td>
    <td>{{employee.name}}</td>

The <td> are outside the <tr>, so {{ employee }} does not exist in the <td>.

This should work :

<tr ng-repeat="employee in employees">
    <td>{{employee.username}}</td>
    <td>{{employee.id}}</td>
    <td>{{employee.name}}</td>
</tr>