Question

我有一个$scope.movies里面有6个对象。在我的模板上，我使用ng-repeat来显示内容。看起来像这样。

通过movie_container创建"ng-repeat" = "movie in movies" div。

<div id="watchlist">
   <div class="movie_container"> Movie Title </div>
   <div class="movie_container"> Movie Title </div>
   <div class="movie_container"> Movie Title </div>
   <div class="movie_container"> Movie Title </div>
   <div class="movie_container"> Movie Title </div>
   <div class="movie_container"> Movie Title </div>
</div>

我想要做的是将每3个项目包装在容器div中，以便结果为

<div id="watchlist">
   <div class="movie_wrap">
     <div class="movie_container"> Movie Title </div>
     <div class="movie_container"> Movie Title </div>
     <div class="movie_container"> Movie Title </div>
   </div>
   <div class="movie_wrap">
     <div class="movie_container"> Movie Title </div>
     <div class="movie_container"> Movie Title </div>
     <div class="movie_container"> Movie Title </div>
  </div>
</div>

使用angular或javascript可以创建这样的东西吗？

$ scope.movies数组看起来像这样（这显然是示例数据，但它看起来像这样）。

$scope.movies = [
  {
    title: 'Star Wars',
    release_date: '10-11-2015',
    movie_id: '3381',
    link: 'ePbKGoIGAXY'
  }, {
    title: 'Spectre',
    release_date: '25-12-2015',
    movie_id: '3371',
    link: 'KlyknsTJk0w'
  }, {
    title: 'Revenant',
    release_date: '02-03-2016',
    movie_id: '3361',
    link: 'nyc6RJEEe0U'
  },
    {
    title: 'Star Wars',
    release_date: '10-11-2015',
    movie_id: '3351',
    link: 'zSWdZVtXT7E'
  }, {
    title: 'Spectre',
    release_date: '25-12-2015',
    movie_id: '3441',
    link: 'ePbKGoIGAXY'
  }, {
    title: 'Revenant',
    release_date: '02-03-2016',
    movie_id: '3331',
    link: 'Lm8p5rlrSkY'
  }
];

Answer 1

我会在控制器中分割电影然后循环遍历组，所以我不需要在视图中使用太多逻辑。控制器：

var i,j,temparray,chunk = 3, movieGroups=[];
for (i=0,j=movies.length; i<j; i+=chunk) {
    temparray = movies.slice(i,i+chunk);
    movieGroups.push(temparray);
}
$scope.movieGroups = movieGroups;

标记：

<div class="movie_wrap" ng-repeat="movieGroup in movieGroups">
   <div class="movie_container" ng-repeat="movie in movieGroup">{{movie.title}}</div> 
</div>

Answer 2

您可以编写一个函数将它们拆分为一个对象数组，这将使您更容易。见这里

小提琴示例：http://jsfiddle.net/U3pVM/20670/

这样的事情：

$scope.sortMoviesForWrapper = function() {
  $scope.sortedMovies = [];

  while ($scope.movies.length > 0)
    $scope.sortedMovies.push({"movies" : $scope.movies.splice(0, 3)});
};

//invoke function immediately (you can change when you do this if you need)
$scope.sortMoviesForWrapper();

我使用函数sortedMovies将电影转换为sortMoviesForWrapper并立即调用它，然后在sortedMovies上使用repeat，如下所示：

<div class="movie_wrap" ng-repeat="movieWrappers in sortedMovies">
  <div class="movie_container" ng-repeat="movie in movieWrappers.movies">
  {{movie.link}}
  </div>
</div>

我使用movie.link，因此您可以看到它们是独一无二的。这是基本的想法。您可以修改您认为合适的方式。我创建了一个数组，里面有对象，所有电影都有“电影”键，以便在模板中更容易重复。您不必使用对象或电影的关键字，我个人更喜欢以这种方式使用它。

请记住，如果您的$scope.movie对象发生变化，则必须重新运行此功能。希望这会有所帮助。

围绕范围中的每6个对象创建一个包含div

2 个答案: