CODEWITHSUNDEEP
angularjs
Asad
Asad

Reputation: 201

data is not populating in table using ng-repeat

I am getting data from data base the data is coming from db and showing in alert but not showing thwe table using ng-repeat. Here is my code :

Table Code:

<table class="table table-hover table-bordered">
                                 <tr>
                                    <th>Doctor Id</th>
                                    <th>Name</th>
                                    <th>Specialization</th>
                                 </tr>
                                  <tr ng-repeat="doctor in doctorList" class="success">
                                    <td> {{doctor.userId}} </td>
                                    <td>{{doctor.name}}</td>
                                    <td>{{doctor.specialization}}</td>
                                  </tr>
                            </table>

Button Click Code:

 <div class="controls" ng-controller="searchController">
                                <a  class="btn btn-success " ng-click="searchDoctor()"> Search Doctor  </a>
                            </div>

Controller Code:

var myApp=angular.module('myApp',[]);
myApp.controller('searchController',['$scope','$http',function($scope,$http) {
$scope.searchDoctor = function(){
    alert("search");
    $http.get('http://localhost:8080/Webapp/webapi/doctor/'+$scope.spec).success(function(data){

        var doctorList = [];
        for(j=0; j<data.length; j++){
            alert(data[j].homeNumber);
            doctorList.push({
                "specialization" : data[j].specialization,
                "userId":  data[j].userId,
                "name":  data[j].firstName
            })
            }
        alert(doctorList[0].name);
        $scope.doctorList = doctorList;
    });
}

}]);

The list is set i get the value in the alert but not showing in the table.Can any one help me what i am doing wrong, I shall be thankful :)

Upvotes: 0

Views: 601

Answers (2)

user1817574
user1817574

Reputation:

Do you have two angular controllers that are siblings like DoctorsController and SearchController and your html structure is like this?

<div ng-controller="DoctorsController">
    <table class="table table-hover table-bordered">
     ...
     </table> 
</div>
<div ng-controller="SearchController">
    ...
<div>

In this case it's normal that your list won't get updated because there are 2 different scopes. Maybe it's a good idea to post also your html structure including the angular controllers.

Upvotes: 0

Iamisti
Iamisti

Reputation: 1710

The scope of your table is in the wrong place I guess.

The table should be inside ng-controller="searchController" div.

Upvotes: 2

Related Questions