Как сделать общий заголовок фильмов, чтобы он не повторялся из вызова RT API в AngularJS?

Question

Как сделать общий заголовок фильмов, чтобы он не повторялся из вызова RT API в AngularJS?

0

Хорошо, поэтому у меня есть эта проблема, когда мне нужно скрыть общее количество фильмов, найденных в поиске, с гнилыми помидорами 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;
          });
      });
  });

HawkBlade124 22 март 2016, в 22:19

Источник

Теги:

javascript

angularjs

2 ответа

0

Переместите общий видеоролик за пределы ngRepeat.

<h1>Total movies: {{totalMovies}}</h1>     
<div class="movie" ng-repeat="movie in movies">
  <!-- movie stuff -->

Jaydo 22 март 2016, в 19:35

Ещё вопросы

Konkko · Accepted Answer · 2016-03-22T19-44-00.000Z

Просто проверьте индекс:

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

Это работает! Не могу поверить, что это было так просто. Большое спасибо. :)