划分排序列表

-1

我有一个电影列表，需要将它们分组在两个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"); 
      }]

所有我的电影已经按照alphabteically排序我只需要在css的帮助下将它们结构类似于此image

来源

2015-11-14 Farrugia

这里的问题是，究竟是什么？ – cimmanon

我需要再次对所有列表进行排序，并在每个字母表的列表中像图像一样放置一个div，而不是按字母顺序将其命名 – Farrugia

我会创建一个为电影添加“$ first”属性的过滤器。如果它是以字符开头的排序列表中的第一个，那么$ first将是true。以大写显示字符时，在视图中首先绑定到$。

下面演示了这样的想法：

var app = angular.module('app',[]); 
 
app.controller('ctrl', function($scope) { 
 
    $scope.movies = [ 
 
    { title: 'The Godfather' }, 
 
    { title: 'Fargo' }, 
 
    { title: 'Sniper' }, 
 
    { title: 'Terminator'}, 
 
    { title: 'Click'}, 
 
    { title: 'Cake' }, 
 
    { title: 'Frozen' }, 
 
    { title: 'Casino Jack' }, 
 
    { title: 'Superman' }, 
 
    { title: 'The Matrix' } 
 
    ]; 
 
}); 
 
app.filter('applyFirst', function() { 
 
    return function (movies) { 
 
    for(var i = 0; i < movies.length; ++i) { 
 
     if (i == 0) 
 
     movies[i].$first = true; 
 
     else { 
 
     if (movies[i].title.toLowerCase()[0] != movies[i-1].title.toLowerCase()[0]) { 
 
      movies[i].$first = true; 
 
     } 
 
     else { 
 
      movies[i].$first = false; 
 
     } 
 
     } 
 
     
 
    } 
 
    return movies; 
 
    } 
 
});

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

来源

2015-11-14 13:47:40 pixelbits

这是不可能在CSS中，你的代码必须将电影数组分割成一个字母数组，每个字母数组都有一组电影。您可以使用减少为：

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

这样你就可以做的字母阵列上的循环，并且在每个做另一个循环为每部电影。

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

来源

2015-11-14 13:11:24 gilamran

划分排序列表

回答

相关问题