Question

我可以获取输入并获取json我也可以将数据插入到 $ scope.movies

但我无法看到结果。我错过了什么？

感谢。

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

编辑：我使用live-server来运行此代码。也许它已经连接了？

Answer 1

试试这个：

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

由于您使用的是fetch而不是$http，因此Angular不会注意到范围对象已被更改。 $applyAsync手动安排更改检测。

为避免这些麻烦，我建议您切换到$http。

编辑：$ applyAsync在Angular 1.0.7中不可用 - 如果你升级到像https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js这样的最新版本，它就会起作用。

从api获取数据，但无法呈现响应

1 个答案: