2017-03-19 4 views
1

応答をレンダリングすることができません。 何が欠けていますか?

ありがとうございました。

HTML:

<!DOCTYPE html> 
<head> 
    <title>Learning AngularJS</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> 
    <script src="app.js" type="text/javascript"></script> 
    <script src="mainController.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'> 
    <input type='text' ng-model='searchMovies' /> 
    <button ng-click='addNew()'>Add</button> 
    <ul> 
     <li ng-repeat="movie in movies">1</li> 
    </ul> 
    </div> 
</body> 
</html> 

アプリ:

var app = angular.module('MyTutorialApp',[]) 

コントローラ:

app.controller("MainController", function($scope){ 
    $scope.movies = null; 
    $scope.searchMovies = null; 
    $scope.addNew = function() { 
    if ($scope.searchMovies != null && $scope.searchMovies != "") { 
     fetch('http://www.omdbapi.com/?s=' + $scope.searchMovies) 
       .then(data => data.json()) 
       .then(data => { 
        console.log(data) 
        $scope.movies = data.Search 
       console.log($scope.movies)}); 
    } 
    } 
}); 

編集:私はこのコードを実行するために、ライブサーバーを使用しています。多分それは接続されていますか?

答えて

0

はこれを試してみてください:

... 
$scope.movies = data.Search 
$scope.$applyAsync() 

あなたがfetchなく$httpを使用しているため、角度はスコープオブジェクトが変更されていることがわかりません。 $applyAsyncは変更検出を手動でスケジュールします。

これらの手間を避けるため、$httpに切り替えることをおすすめします。


編集:$ applyAsyncは角1.0.7では利用できません - あなたはhttps://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.jsのような最新のバージョンにアップグレードした場合、それは動作します。

+0

'$ scope。$ applyAsync();'の代わりに '$ q.when()'に約束を入れて同様の効果を得ることができます。そのアプローチがよりクリーンであると感じる人もいます。 –

+1

$ applyAsync()が機能しませんでした。今、$ http – user4602966

+0

を試しています。何らかの理由でAngularJS 1.0.7を使用していますか?そのバージョンは本当に時代遅れです。アップグレードできますか? – stholzm

関連する問題