Question

我有一个电影列表，需要将它们分组为c＃（或者角度也可以接受）和css与下面提供的图像非常相似。有关如何连接html和c＃以及如何使用.groupBy（）或类似的东西的任何想法吗？

这是我到目前为止所得到的：

HTML（按字母顺序排列所有电影的列表）：

 <div class="movs">
 <movies-collection movies="::vm.sortedMovies" order-by="name"></movies-collection>
 </div>

打字稿：

 static id = "MoviesController";

        static $inject = _.union(MainBaseController.$baseInject, [
            "sortedMovies"
        ]);

        static init = _.merge({
            sortedMovies: ["allMovies", (movies: Array<Models.IGov>) => {
                return _.sortBy(movies, "content.name");
            }]

我所有的电影都已经按照字母顺序进行排序我只需要在css的帮助下构建它们就像image

一样

Answer 1

我会创建一个过滤器，添加＆＃34; $ first＆＃34;电影的财产。如果它是以字符开头的排序列表中的第一个，则$ first将为true。当您以大写字母显示字符时，在视图中绑定到$。

以下说明了这个想法：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.js"></script>
<div ng-app = "app" ng-controller="ctrl">
    <div ng-repeat="movie in movies | orderBy:'title' | applyFirst">
      <h1 ng-if="movie.$first">{{ movie.title[0] | uppercase }}</h1>
      {{ movie.title }}
    </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

在css中不可能，你的代码必须将电影数组分成一个字母数组，每个字母都包含一系列电影。您可以使用 reduce ：

var groupedMovies = movies.reduce((lettersArray, movie, idx, arr) => {
    var firstLetter = movie[0].toUpperCase();
    if (!lettersArray[firstLetter]) {
        lettersArray[firstLetter] = [movie];
    }
    else {
        lettersArray[firstLetter].push(movie);
    }

    return lettersArray;
}, []);

结果将如下所示：

[ T: [ 'The Avengers', 'Tower Quest', 'ThunderFist', 'Transformers' ],
  U: [ 'Untamed Bengal Tiger', 'Untamed Giant Panda' ],
  V: [ 'Victorious' ] ]

这样你就可以在字母数组上做一个循环，并在每个电影中为每部电影做另一个循环。

最佳做法是为分组电影创建指令，它将收到该字母中的字母和内部电影数组。

划分排序列表

2 个答案: