Angular not displaying $scope data with ng repeat passed in controller. No errors too

Question

In this project, I am executing a query on click list item of ionic. I am getting the data from php json_encode. The data is getting displayed in the networks tab under response. Also, I have added $scope.doctorList = {}; and after that wrote this line $scope.doctorList = response which comes from success function. The data is getting displayed in console.log($scope.doctorList) as well.

Now when I try to display this data in angular, it does not show anything. I have included it in ng-repeat as : ng-repeat = "doctors in doctorList"

The syntax seems to be correct as the same thing is working for another controller but here, I can't retrieve the data. The page goes blank and there is no error in console / netowrks tab.

I am using one controller for two html files. Please help

Here is the routes file

angular.module('app.routes', []).config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $stateProvider.state('homeselect', {
        url: '/home-select',
        templateUrl: 'templates/homeselect.html',
        controller: 'homeCtrl'
    });

    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
    });
});

Here is the controller

angular.module('app.controllers', []).controller('homeCtrl', function ($scope, $http, $ionicSideMenuDelegate, myServices, $window) {

    $ionicSideMenuDelegate.toggleLeft();

    $scope.loadDoc = function (type) {
        $http({
            url: "http://localhost/drmedic/retrieve_details_type.php",
            method: "POST",
            data: {
                data: type
            }
        }).success(function (response) {
            $scope.doctorList = {};
            $scope.doctorList = response;
            $window.location.href = '#/home-select';
        });

    };

    $http({method: 'GET', url: 'http://localhost/drmedic/retrieve_details.php'}).success(function (data) {
        $scope.contents = {};
        $scope.contents = data;
    });
});

Here is the html file code for ng-repeat

<ion-list ng-repeat="doctors in doctorList">
  <ion-item>
  <center>
    {{doctors.name}}<br>
    {{doctors.fees}}
  </center>
  </ion-item>
</ion-list>

Do you use any custom directives here? ion-list is a custom directive? Try to inspect the page with devtools and see if you directive is compiled — aprok
– aprok, Commented Mar 10, 2016 at 8:36
@NAITIK GADA : Cay you just let me know where you call loadDoc.? — lalitpatadiya
– lalitpatadiya, Commented Mar 10, 2016 at 8:36
Are you actually calling $scope.loadDoc() ? It's not visible in your code. Try adding the call in your controller. — Raul A.
– Raul A., Commented Mar 10, 2016 at 8:43
<ion-list ng-repeat="doctors in contents"> <ion-item ng-click="loadDoc(doctors.type)"> <center> <img ng-src="{{doctors.url}}" height="100px" width="100px"><br> {{doctors.type}} </center> </ion-item> </ion-list> — NAITIK GADA
– NAITIK GADA, Commented Mar 10, 2016 at 8:43
I call the $scope.loadDoc in another html page which has all the list. When I click a single list item, the loadDoc function is called which passes the doctors.type...... and then based on the passed type, the data is getting displayed in console.log but not in ionic using ng-repeat — NAITIK GADA
– NAITIK GADA, Commented Mar 10, 2016 at 8:45

Yasemin çidem · Accepted Answer · 2016-03-10 09:10:27Z

You can use service.Open a file called service.js.After that this inject to app.js. I revised the code as follows:

Service.js:

 angular.module('app.services', [])
    .factory("AppService", function ($http) {
        var AppService= {};

        AppService.GetDetails = function (data) {
            return  $http({
            url: "http://localhost/drmedic/retrieve_details_type.php",
            method: "POST",
            data: {
                data: data
            }
            });
        return AppService;
        }

controller.js:

.controller('homeCtrl',function($scope,$http,$ionicSideMenuDelegate,myServices,$window,AppService) {
        $ionicSideMenuDelegate.toggleLeft();
        $scope.loadDoc = function(type){
       AppService.GetDetails({type:type}).success(function (response) {
              $scope.doctorList = {}; 
              $scope.doctorList = response;
              $window.location.href = '#/home-select';
        })
        .error(function (err) {
              console.log(err);
        });
   }
});

Mani S · Accepted Answer · 2017-06-01 04:13:57Z

0

ng-repeat iterates through a collection of items, create its own scope and renders it on UI. When I say collections, it should be an array. https://docs.angularjs.org/api/ng/directive/ngRepeat

Please check the data-type for doctorList, which I believe is an array.

$scope.doctorList = [];

I hope this should solve the problem, if not please share the code I'll take a deep look into it.

answered Jun 1, 2017 at 4:13

Mani S

2,5811 gold badge14 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular not displaying $scope data with ng repeat passed in controller. No errors too

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related