CODEWITHSUNDEEP
javascriptangularjsnode.jsangularjs-ng-repeat
nehas
nehas

Reputation: 247

Angular ng-repeat scope issue

Nothing in my {{}} are showing in my html file. Can someone please tell me what I am doing wrong. I have no errors in my console.

"GOT DATA" will print in my console, but not show in my file.

The is my html code

<div class="announcements" ng-controller="onBusinessAnnouncementCtrl as announcements">
     {{announcements.latest}}
</div>

This is my js code pulling from the server

app.controller('onBusinessAnnouncementCtrl', function($scope, $http) {

   $http.get('http://localhost:3000/latest')
    .success(function(responses) {
      //$scope.latest = responses;
      $scope.latest = "GOT DATA";
      console.log($scope.latest);
    });
});

Upvotes: 1

Views: 765

Answers (2)

nehas
nehas

Reputation: 247

Figured it out! For reference: There is nothing showing in my HTML because there is no value assigned to the controller. To assign "latest" to my controller I have to do this:

app.controller('onBusinessAnnouncementCtrl', function($scope, $http) {
$http.get('http://localhost:3000/latest')
    var this = this;
    .success(function(responses) {
      this.latest = responses;
    });
});

<div class="announcements" ng-controller="onBusinessAnnouncementCtrl as announcements">{{announcements.latest}}</div>

Upvotes: 0

Stefan van de Vooren
Stefan van de Vooren

Reputation: 2717

Because you use the controller as syntac you should apply the variables in your controller to this instead of $scope.

See the same problem in AngularJS Ng-repeat is not working as expected where a repeater was used

below the answer on the previous question: In your repeater you're looping over announcements.announcements in your controller you set $scope.announcements = response.

Either you change the repeater in ng-repeat="eachAnnouncement in announcements" or change your scope variable to: $scope.announcements = {announcements : response}

Upvotes: 1

Related Questions