如何使总的影片标题不重复AngularJS中的RT API调用?

霍克·布莱德124

好的,所以我有这个问题,我必须隐藏使用烂番茄api进行搜索时发现的电影总数。每次键入查询时,每次出现的不同电影都会重复相同的标题。我只需要在顶部重复。这是正在发生的事情的图像,因为我无法在JSFiddle中做到。这是我的HTML代码:

<html ng-app="demoApp">
<head>
    <title>demo</title>
    <script src="angular.min.js"></script>
    <script src="search.js"></script>
</head>
<body ng-controller="moviesController">
    <label for="q">Search Text</label>
    <input type="text" id="q" ng-model="data.q" ng-model-options="{debounce: 500}"/>

    <label for="page_limit">Page Size</label>
    <input type="text"  id="page_limit" ng-model="data.page_limit" ng-model-options="{debounce: 500}"/>

    <label for="page">Page Number</label>
    <input type="text" id="page" ng-model="data.page" ng-model-options="{debounce: 500}"/>

        <div class="movie" ng-repeat="movie in movies">
              <h1>Total movies: {{totalMovies}}</h1>     
            <div>               
                <img src="{{movie.posters.thumbnail}}" />
                <h2>{{movie.title}}</h2>
            </div>
            <div>
                <p>{{movie.synopsis}}</p>
                <dl>
                    <dt>Rating</dt>
                    <dd>{{movie.mpaa_rating}}</dd>

                    <dt>Year</dt>
                    <dd>{{movie.year}}</dd>

                    <dt>Critics Score</dt>
                    <dd>{{movie.ratings.critics_score}}</dd>

                    <dt>Audience Score</dt>
                    <dd>{{movie.ratings.audience_score}}</dd>

                    <dt>Theater Release Date</dt>
                    <dd>{{movie.release_dates.theater}}</dd>

                    <dt>DVD Release Date</dt>
                    <dd>{{movie.release_dates.dvd}}</dd>
                </dl>
            </div>
        </div>
</body>
</html>

这是我的angularJS代码

angular.module('demoApp', [])
  .constant('apiKey', 'removed for security')
  .constant('apiUrl', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json')
  .controller('moviesController', function ($scope, $http, apiUrl, apiKey) {
      $scope.data = {}

      $scope.$watchGroup(['data.q', 'data.page_limit', 'data.page'], function () {
          $http.jsonp(apiUrl, {
              params: {
                  q: $scope.data.q,
                  page_limit: $scope.data.page_limit,
                  page: $scope.data.page,
                  apikey: apiKey,
                  callback: 'JSON_CALLBACK'
              }
          }).then(function (response) {
              $scope.movies = response.data.movies;
        //Call total movies
              $scope.totalMovies = response.data.total;
          });
      });
  });
孔科

只需检查索引:

<h1 ng-if="$index == 0">Total movies: {{totalMovies}}</h1>     

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章