Javascript 如何使用AngularJS中的下拉菜单更新URL以从中抓取图片_Javascript_Angularjs

Javascript 如何使用AngularJS中的下拉菜单更新URL以从中抓取图片

javascript angularjs

Javascript 如何使用AngularJS中的下拉菜单更新URL以从中抓取图片,javascript,angularjs,Javascript,Angularjs,我正试图用AngularJS构建一个网站，从reddit抓取图片，并使用不同的参数（如投票数和发布日期）显示它们。没有什么是以前没有做过的，但我这样做是为了学习如何使用角度。如果我对subreddit页面进行硬编码，以从控制器中的这一行中获取图像，那么它就可以工作了： $http.jsonp('http://reddit.com/r/pics.json?jsonp=JSON_CALLBACK').success(function(response) { 但我真的不知道如何让它改变url。我

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

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

但我真的不知道如何让它改变url。我在控制器中创建了一个$scope.subreddit和一个下拉列表来选择要使用的subreddit，但它不起作用

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

你需要把这个变量放在你的URL中，然后每次它被改变时，都会得到新的帖子

例如：

现在添加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是否适合。帖子只提到图片

谢谢！orderProp是用于搜索的，但已经起作用了。

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

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