划分排序列表 [英] Dividing a sorted list

问题描述

我有电影的列表，并需要将它们分组在C＃（或角度也是可以接受的）和CSS非常类似地在这里下面所提供的图像。关于如何连接HTML和C＃和如何使用.groupBy（）或类似的东西，请任何想法？

这是我到目前为止有：

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

 ＆LT; D​​IV CLASS =MOVS＆GT;
 ＆LT;电影收集电影=:: vm.sortedMovies订单按=名与GT;＆LT; /电影收集＆GT;
 ＆LT; / DIV＆GT;
 

打字稿：

 静态ID =MoviesController;        静态$注射= _.union（MainBaseController。$ baseInject，[
            sortedMovies
        ]）;        静态的init = _.merge（{
            sortedMovies：allMovies（电影：数组＆LT; Models.IGov＆GT;）= GT; {
                返回_.sortBy（电影content.name）;
            }]
 

我所有的电影都已经alphabteically排序我只需要使用CSS结构类似他们这种的图片

解决方案

我想创建一个过滤器，增加了一个$第一属性的电影。如果是在以字符开头，则首先$将是真实的一个排序列表中的第一。绑定到$先在你看来，当你表现出大写字符。

下面演示了这样的想法：

\r

\r

VAR应用= angular.module（'应用'，[]）;\r
app.controller（'CTRL'，函数（$范围）{\r
  $ scope.movi​​es = [\r
    {标题：教父}，\r
    {标题：'银行'}，\r
    {标题：狙击手}，\r
    {标题：终结者}，\r
    {标题：点击}，\r
    {标题：蛋糕}，\r
    {标题：冻结}，\r
    {标题：赌场杰克}，\r
    {标题：超人}，\r
    {标题：黑客帝国}\r
  ];\r
}）;\r
app.filter（'applyFirst'，函数（）{\r
  返回功能（电影）{\r
    对于（VAR I = 0; I＆LT; movies.length ++我）{\r
      如果（我== 0）\r
        。电影[I] $第一= TRUE;\r
      其他{\r
        如果（电影[I] .title.toLowerCase（）[0]！=电影[I-1] .title.toLowerCase（）[0]）{\r
          。电影[I] $第一= TRUE;\r
        }\r
        其他{\r
          。电影[I] $第一= FALSE;\r
        }\r
      }\r
      \r
    }\r
    回归电影;\r
  }\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.5.0-beta.1/angular.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL＆GT;\r
    ＆LT; D​​IV NG重复=电影中的电影|排序依据：'标题'| applyFirst＆GT;\r
      电影$第一;＆LT H1 NG-IF =＆GT; {{movie.title [0] |大写}}＆LT; / H1＆GT;\r
      {{movie.title}}\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I have a list of movies and need to group them in both c# (or angular is also acceptable) and css very similary to the image provided here underneath. Any ideas on how to wire the html and c# and how to use the .groupBy() or something similar please ?

This is what I've got so far:

HTML (a list of all my movies in alphabetical order):

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

Typescript:

 static id = "MoviesController";

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

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

All my movies are already sorted alphabteically I just need to with the help of css structure them similarly to this image

解决方案

I would create a filter that adds a "$first" property to the movie. If it is the first in a sorted list that starts with the character, then $first would be true. Bind to $first in your view when you show the character in uppercase.

The following demonstrates this idea:

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>

这篇关于划分排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！