Issue
I'm trying to build a site with AngularJS that grabs pictures off of reddit and displays them in using different parameters like the number of votes and date posted. Nothing that hasn't been done before but I'm doing this to learn how to use Angular. I've got it working if I hard code the subreddit page to get the images from in this line in the controller:
$http.jsonp('http://reddit.com/r/pics.json?jsonp=JSON_CALLBACK').success(function(response) {
But I'm not really sure how to get it to change the url. I made a $scope.subreddit in the controller and a drop down to select the subreddit to use but it doesn't work.
Here's what I have for my index.html:
<!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 for the controller:
'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';
}
Solution
You need to put the var in your URL and then every time it is changed, get new posts.
Example: http://jsfiddle.net/TheSharpieOne/x8XXR/1/
function RedditPosts($scope, $http) {
$scope.orderProp = '-data.score';
$scope.subreddit = 'pics';
$scope.updatePosts = function () {
$http.jsonp('http://reddit.com/r/'+$scope.subreddit+'.json?jsonp=JSON_CALLBACK').success(function (response) {
$scope.Post = response.data
});
};
$scope.updatePosts();
}
Now add ng-change to trigger the update when it is changed.
<select ng-model="subreddit" ng-change="updatePosts()">
<option value='pics'>pics</option>
<option value='earthporn'>earth</option>
<option value='spaceporn'>earth</option>
</select>
Note: Not sure where the orderProp fits in. Post only mentioned pic
Answered By - TheSharpieOne
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.