ng-repeat not displaying items

Question

i have a weird bug in my angular app where the data in my ng-repeat is not displaying but if i refresh the page and navigate to my home page it quickly flickers into view then disappears, im not sure why this is happening can someone help me out?

thanks in advance

appRoutes.js

angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {

$routeProvider

    // home page
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'MainController'
    })

    // characters page that will use the CharactersController
    .when('/characters', {
        templateUrl: 'views/characters.html',
        controller: 'CharactersController'
    });

$locationProvider.html5Mode(true);

}]);

CharactersCtrl.js

angular.module('CharactersCtrl', []).controller('CharactersController', function($scope) {

$scope.init = function(){
    $scope.getCharacters();
}

$scope.getCharacters = function(){

    $.ajax({
        url:'https://gateway.marvel.com/v1/public/characters?apikey=APIKEY',
        success:function(response){
            $scope.characters = response.data.results;
            console.log($scope.characters);
        },
        fail:function(){

        }
    });

}

$scope.init();

});

characters.js

<div>
<div class="text-center">
    <h1>Characters</h1>
</div>

<section id="character-section" class="row">

    <figure class="columns small-3" ng-repeat="hero in characters">
            <!-- <img ng-src="{{hero.thumbnail.path}}" alt="{{hero.name}}-image"> -->
        <figcaption>
            {{hero.name}}
        </figcaption>
    </figure>
</section>
</div>

index.html

<body ng-app="marvelApp">

    <!-- HEADER -->
    <header>
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Stencil: Node and Angular</a>
            </div>

            <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
            <ul class="nav navbar-nav">
                <li><a href="/characters">characters</a></li>
            </ul>
        </nav>
    </header>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <main ng-view ></main>

</body>

app.js

angular.module('marvelApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'CharactersCtrl', 'CharactersService']);

Answer 1

You are using jQuery ajax. Angular does not automatically update variable when modified outside the Angular scope (in this case, $scope.characters is modified using jquery ajax);

I sugges you use the $http service provided by angular for making ajax calls.

But if you insist in using jquery ajax, you can wrap this code $scope.characters = response.data.results; with

`$scope.$apply(function(){

})`

Result:

$scope.$apply(function(){
    $scope.characters = response.data.results;
})

ng-repeat not displaying items

Question

1 answers

solution1
0 ACCPTED 2016-06-30 00:21:48

ng-repeat not displaying items

Question

1 answers

solution1 0 ACCPTED 2016-06-30 00:21:48

solution1
0 ACCPTED 2016-06-30 00:21:48