0

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';
}
4

1 回答 1

1

您需要将 var 放入您的 URL 中，然后每次更改时，获取新帖子。

示例：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();
}

现在添加 ng-change 以在更改时触发更新。

            <select ng-model="subreddit" ng-change="updatePosts()">
                <option value='pics'>pics</option>
                <option value='earthporn'>earth</option>
                <option value='spaceporn'>earth</option>
            </select>

注意：不确定 orderProp 适合的位置。仅发布提到的图片

于 2013-09-05T23:00:47.870 回答