Question

我是新人并且有一个问题:-) 我已经开始使用angularJS，现在正在制作SPA，从web api获取数据并显示给人。实际上它是一个电影搜索应用程序，发送请求omdbapi网站，并获取有关电影标题的数据，如：标题，年份，图像，演员等... 我的应用程序可以抓取并显示数据，但是当搜索返回多个结果（对象）时，我会堆叠起来。如果我使用http://www.omdbapi.com/?t=Batman和$ http，我的应用程序将显示它在数据库中找到的第一部电影，但如果我使用http://www.omdbapi.com/?s=Batman，应用程序将在日志控制台中从网站获得9个结果（范围对象）的响应我检查$ scope但不会显示任何。因此，我的问题有点理论化;如何在视图中显示所有这些响应。对不起，我是angularJS的新手，只需三天检查，但这是我无法在网上找到的东西。我的C

var app = angular.module('movies', [])
app.controller('startmovie', function ($scope, $http) {
    $scope.film = "Game";
    $scope.click = function () {
        $http({
            url: 'http://www.omdbapi.com/?s=' + $scope.film ,
            method: 'GET'
        }).then(function (response) {

            $scope.movie = response.data;
        }, function (response) {
            alert("neuspješno");
        }

               );
    };
});

我的控制台日志：

搜索

[Object { Title="Game of Thrones",  Year="2011–",  imdbID="tt0944947",  more...}, Object { Title="The Imitation Game",  Year="2014",  imdbID="tt2084970",  more...}, Object { Title="Sherlock Holmes: A Game of Shadows",  Year="2011",  imdbID="tt1515091",  more...}, 7 more...]

0

Object { Title="Game of Thrones",  Year="2011–",  imdbID="tt0944947",  more...}

1

Object { Title="The Imitation Game",  Year="2014",  imdbID="tt2084970",  more...}

2

Object { Title="Sherlock Holmes: A Game of Shadows",  Year="2011",  imdbID="tt1515091",  more...}

3

Object { Title="The Game",  Year="1997",  imdbID="tt0119174",  more...}

4

Object { Title="Ender's Game",  Year="2013",  imdbID="tt1731141",  more...}

5

Object { Title="Spy Game",  Year="2001",  imdbID="tt0266987",  more...}

6

Object { Title="The Game Plan",  Year="2007",  imdbID="tt0492956",  more...}

7

Object { Title="The Crying Game",  Year="1992",  imdbID="tt0104036",  more...}

Answer 1

要在视图中使用数据，您必须先将它们放入$ scope（您已经做过的）

然后您可以在视图中显示带有{{yourvar}}的“$ scope.yourvar”。 ng-repeat用于迭代数组（$scope.movie.Search）一个小例子：

<div ng-controller="startmovie">
  <button ng-click="click()">
    click 
  </button>

  <pre>{{movie}}</pre>
  total movies : {{movie.totalResults}}<br>
  <ul>
    <li ng-repeat="s in movie.Search">
      {{s.Title}} - {{s.Year}}
    </li>
  </ul>       
</div>

一个工作示例： http://plnkr.co/edit/G4OQ9SsWXEfjwQO2cezx?p=preview

从web api中提取AngularJS数据

1 个答案: