How do i make total movies header to not repeat itself from RT API call in AngularJS?

Question

Okay so I have this problem where I have to hide the total amount of movies found in a search with the rotten tomatoes api. Every time I type in a query, I get a repeat of the same header with each different movie that appears. I need to only repeat it at the top. Here is an image of what is happening since I can't do it in JSFiddle. Here is my HTML code:

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

Here is my angularJS code

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

Answer 1

只需检查索引：

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

Answer 2

Move the total movie heading outside of the ngRepeat.

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

How do i make total movies header to not repeat itself from RT API call in AngularJS?

Question

2 answers

solution1
1 ACCPTED 2016-03-22 21:26:01

solution2
0 2016-03-22 21:27:35

How do i make total movies header to not repeat itself from RT API call in AngularJS?

Question

2 answers

solution1 1 ACCPTED 2016-03-22 21:26:01

solution2 0 2016-03-22 21:27:35

solution1
1 ACCPTED 2016-03-22 21:26:01

solution2
0 2016-03-22 21:27:35