好的,所以我有这个问题,我必须隐藏使用烂番茄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] 删除。
我来说两句