var app = angular.module('marvelDemo', ['ngRoute','ui.bootstrap']);
app.controller('MainCtrl', function($scope, $location, $http) {
$scope.char={};
$scope.showCharInfo= false;
$scope.getCharacters = function(val) {
$scope.timeStamp= Date.now();
$scope.publicKey="5234a931fdd1da574fb6133e31a6d02c";
baseUrl= "http://gateway.marvel.com/v1/public/characters";
return $http.get(baseUrl, {
params: {
nameStartsWith: val,
limit: 25,
ts: $scope.timeStamp,
apikey: $scope.publicKey
}
}).then(function(response){
$scope.charInfoArr=response.data.data.results;
return response.data.data.results.map(function(item){
return item.name;
});
});
};
$scope.selectCharacter=function (item){
angular.forEach($scope.charInfoArr, function(obj, key){
if(obj.name===item){
if (obj.thumbnail){
$scope.char.thumb= obj.thumbnail.path+"."+obj.thumbnail.extension;
}else{
$scope.char.thumb="";
}
$scope.char.name= obj.name;
$scope.char.desc= obj.description;
$scope.showCharInfo= true;
}
});
}
});
<!DOCTYPE html>
<html ng-app="marvelDemo">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-route@*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script> <script src="app.js"></script>
<script language="JavaScript" src="md5.js"></script>
</head>
<body ng-controller="MainCtrl">
<h4>Search for your Marvel Characters</h4>
<input type="text" ng-model="asyncSelected" placeholder="Search for you character" typeahead="characters for characters in getCharacters($viewValue)" typeahead-loading="loadingCharacters" typeahead-on-select="selectCharacter($item);asyncSelected=''" class="form-control">
<i ng-show="loadingCharacters" class="glyphicon glyphicon-refresh"></i>
<div ng-if="showCharInfo">
<div ng-if="char.thumb" class="thumbnail"><img src="{{char.thumb}}" /></div>
<div class="charName"><b>{{char.name}}</b></div>
<div class="charDesc">{{char.desc}}</div>
</div>
</body>
</html>