如何使用AngularJS中的下拉列表来更新URL以从中抓取图片

我正在尝试使用AngularJS构建一个网站，该网站从reddit上抓取图片并使用不同的参数（如投票数和发布日期）显示它们。以前没有做过的事情，但我这样做是为了学习如何使用 Angular。如果我对subreddit页面进行硬编码以从控制器中的这一行中获取图像，我就可以工作了：

  $http.jsonp('http://reddit.com/r/pics.json?jsonp=JSON_CALLBACK').success(function(response) {

但我真的不确定如何让它更改网址。我在控制器中制作了一个 $scope.subreddit，并创建了一个下拉菜单来选择要使用的子 reddit，但它不起作用。

以下是我的索引.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>

对于控制器：

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

您需要将 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 适合的位置。仅发布提及的图片

相关内容

最新更新

热门标签：