AkhilEsh Khajuria AkhilEsh Khajuria - 1 year ago 56
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 Source

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>