Currently, I am in the process of creating a website using AngularJS that accesses images from reddit and showcases them based on various parameters such as number of votes and date posted. While this is not groundbreaking, my main goal is to enhance my skills with Angular. At this point, I have managed to make it function by hardcoding the subreddit page into the controller line as shown below:
$http.jsonp('http://reddit.com/r/pics.json?jsonp=JSON_CALLBACK').success(function(response) {
However, I am facing difficulty in changing the URL dynamically. I have created a $scope.subreddit in the controller along with a dropdown for selecting the desired subreddit, but it is not functioning properly.
This is what my index.html looks like:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Reddit Picture Viewer</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="RedditPosts">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value='data.score'>Most Down Votes</option>
<option value='-data.score'>Most Up Votes</option>
</select>
Subreddit:
<select ng-model="subreddit">
<option value='pics'>pics</option>
<option value='earthporn'>earth</option>
<option value='spaceporn'>earth</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="Post">
<li ng-repeat="entry in Post.children | filter:query | orderBy:orderProp ">
<a href="{{entry.data.title}}" class="thumb"><img ng-src="{{entry.data.url}}" height="250" width="250"></a>
{{entry.data.ups}}
{{entry.data.downs}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here is the controller code:
'use strict';
/* Controllers */
function RedditPosts($scope, $http) {
$http.jsonp('http://reddit.com/r/pics.json?jsonp=JSON_CALLBACK').success(function(response) {
$scope.Post = response.data
});
$scope.orderProp = '-data.score';
$scope.subreddit = 'pics';
}