Marvel API

by eprouver

HTML

<div id="app" ng-app="app">
    <div class="display">
        <div ng-repeat="r in resources" class="card">
            <img ng-src="{{r.thumbnail}}"/>
            <p>{{r.name}}</p>
        </div>
        <button ng-click="getdata()">Go</button>
    </div>
</div>

CSS

*{
    font-family:sans-serif;
    font-weight: lighter;
}

img{
    height: 70px;
}

.card{
    display:inline-block;
    width: 100px;
    text-align:center;
    vertical-align:top;
}

JavaScript

var app = angular.module('app', []);

app.service('resources', function(){
    return {
        data: []
    };
});

var offset = 0;

app.directive('display', ['resources', '$http', function(resources, $http){
    return {
        restrict: 'C',
        controller: ['$scope', function($scope){
            $scope.resources = resources.data;
            
            $scope.getdata = function(){
                $http.jsonp('http://gateway.marvel.com/v1/public/characters?series=403&offset='+offset+'&apikey=5473f91a84a90a1c5db4953877ce3f74&callback=JSON_CALLBACK').then(function(response){
                    console.log(response);
                    offset += response.data.data.count;
                    response.data.data.results.forEach(function(v){
                        $scope.resources.push({
                            name: v.name,
                            thumbnail: v.thumbnail.path + '.' + v.thumbnail.extension
                        });
                    });

                }, function(error){
                    console.log('error',error);
                });
            }
        }]
    }
}]);

//angular.bootstrap(document, [app]);