I recently followed a tutorial on creating a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I managed to show the search results on my page, but encountered an issue: I couldn't scroll all the way back up to the search bar after viewing the results to initiate another search. Any thoughts on how to fix this problem? Thank you in advance!
Below is the code snippet: index.js
<!doctype html>
<html lang="en">
Flickr Search
<md-toolbar>
<div class="md-toolbar-tools">
<span class="md-flex">Flickr Search</span>
</div>
</md-toolbar>
<md-content layout="column" layout-align="center center">
<div class="app-content">
<form ng-submit="search()" >
<div ng-show="!isSearching">
<md-input-container class="long" flex>
<label>Search for</label>
<input ng-model="searchTerm">
</md-input-container>
</div>
</form>
<div ng-if="isSearching">
<md-progress-circular md-theme="blue" md-mode="indeterminate"></md-progress-circular>
</div>
<div id="result">
<md-card ng-repeat="picture in results.photos.photo | limitTo:2">
<img ng-src="https://farm{{picture.farm}}.staticflickr.com/{{picture.server}}/{{picture.id}}_{{picture.secret}}_b.jpg" alt="" class="md-card-image">
<h3>{{ picture.title }}</h3>
</md-card>
</div>
</div>
</md-content>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>
app.js
(function(){
'use strict';
angular.module('flickrApp',['ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider){
$mdThemingProvider.theme('blue')
.primaryPalette('pink')
.accentPalette('orange');
}])
.controller('ListController',['$scope','$http',function($scope,$http){
$scope.isSearching = false;
$scope.results = [];
$scope.search = function(){
$scope.isSearching = true;
$http({
method: 'GET',
url: 'https://api.flickr.com/services/rest',
params: {
method: 'flickr.photos.search',
api_key: 'e232c1eade905d440cbdf4e176c828c7',
text: $scope.searchTerm,
format: 'json',
nojsoncallback: 1
}
})
.success(function(data){
console.log(data);
$scope.results = data;
$scope.isSearching = false;
})
.error(function(error){
$scope.isSearching = false;
console.log(error);
});
}
}])
})();
style.css
.app-content{
width: 100%;
}
form{
padding: 10px 30px 20px 25px;
}
md-input-container > input{
width: 100%;
}
md-card{
margin: 0 30px 25px 30px;
}