AngularJS數據從網頁api提取

我是新來的，有一個問題:-) 我已經開始使用angularJS，現在正在製作SPA，從網頁api獲取數據並顯示給個人。實際上，它是一個電影搜索應用程序，向omdbapi網站發送請求並獲取有關電影標題的數據，例如：標題，年份，圖片，演員等等...... 我的應用程序可以抓取並顯示數據，但我堆放在當搜索得到多於一個結果（對象）時返回。如果我使用http://www.omdbapi.com/?t=Batman與$ http，我的應用程序將顯示它在數據庫中找到的第一部電影，但如果我使用http://www.omdbapi.com/?s=Batman，應用程序將在日誌控制檯中獲得9個結果（範圍對象）的響應，當我檢查$ scope但不會顯示任何。因此，我的問題有點理論上的問題。如何在視圖中顯示所有這些響應。對不起，我是angularJS的新手，僅僅三天檢查，但這是我無法在網上找到的東西。我的CAngularJS數據從網頁api提取

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...]

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...}

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

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

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

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

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

來源

2017-01-29 Bognar

使用數據，鑑於你必須把它們放在$範圍內第一個（你已經這樣做）

則可以顯示「$ scope.yourvar」與{{yourvar}}在風景。 NG-重複用於迭代數組（$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

來源

2017-01-29 16:11:26 AlainIb

泰，效果很好:) – Bognar

AngularJS數據從網頁api提取

回答

相關問題