ng-repeat: определить изменение значения элемента в отсортированном списке

Я создаю таблицу с использованием ng-repeat. В этой таблице есть столбец Season, который, очевидно, заполнен {{episode.season}}. Исходные данные сортируются по сезону.ng-repeat: определить изменение значения элемента в отсортированном списке

Я хочу добавить класс до последнего <tr> каждого сезона, то есть когда происходит смена сезона, например.

-------------------------- 
EPISODE 1 | SEASON 1 
-------------------------- 
EPISODE 2 | SEASON 1 
-------------------------- 
EPISODE 3 | SEASON 1  <- THIS ROW SHOULD HAVE DIFFERENT FORMATTING 
-------------------------- 
EPISODE 1 | SEASON 2 
--------------------------

Использование ванильный JavaScript, я бы итерацию по таблице в то время сравнивая каждый сезон <td> с другой, и добавление класса, если есть разница.

Однако, я не знаю, как это сделать, используя угловые. Любая помощь приветствуется.

РЕШЕНИЕ

я решил определить последний эпизод каждого сезона проходом по набору данных на стороне сервера, установив approprioate логическое значение, для этого, а затем с помощью ng-class на пользовательском интерфейсе. Это кажется более простым и более аккуратным, чем цикл через отображаемую таблицу HTML.

источник

2016-12-28 John Steed

вы можете показать нам свой код? – kukkuz

Подумайте об этом по-другому ... перебирайте данные перед тем, как перейти к просмотру, и установите свойство что-то вроде 'isLast' и используйте' ng-class' в поле зрения – charlietfl

, поделитесь своими данными ответа, это поможет понять более четко. –

Предполагая привязку к синтаксису контроллера.

<div ng-repeat="episode in $ctrl.episodes" ng-class="'final-of-type': $ctrl.isDifferent($index);'"></div>

Затем в директиве:

this.episodes = data; // not sure how you're getting this 
this.isDifferent = function(i) { 
    return (i === episodes.length - 1) || (episodes[i].season !== episodes[i + 1].season) 
}

Это должно сделать это или вы.

источник

2016-12-28 05:09:38

Вы должны сортировать эпизоды по сезону. И что будет, если первый сезон будет состоять только из одного эпизода? –

Извините, на основании данных, которые он представил, я предположил, что он уже отсортирован. И он должен работать, даже если первый сезон состоит только из одного эпизода, потому что список содержит все эпизоды для всех сезонов, а не только в один конкретный сезон. –

Первый элемент никогда не будет иметь определенного класса, потому что он будет иметь '$ index == 0', и у вас есть условие' index> 0'.И откуда вы знаете, что каждый сезон имеет более одного эпизода? –

Вы можете использовать groupBy сгруппировать все серии по сезонам, а затем перебирать из каждого отдельного сезона и отметьте $last ряд с желаемым классом (окончательными из-типа):

(function(angular) { 
 
    'use strict'; 
 
var myApp = angular.module('app', ['angular.filter']); 
 

 
myApp.controller('MyController', ['$scope', function($scope) { 
 
    $scope.episodes = [ 
 
    {season:'1',episode:'2'}, 
 
    {season:'2',episode:'1'}, 
 
    {season:'1',episode:'1'}, 
 
    {season:'1',episode:'3'}, 
 
    {season:'2',episode:'2'}, 
 
    {season:'0',episode:'1'} 
 
    ] 
 
}]); 
 
})(window.angular);

.final-of-type { 
 
background-color:grey; 
 
} 
 
td, th { 
 
border: 1px solid #dddddd; 
 
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script data-require="[email protected]*" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script> 
 

 
    <body ng-app="app"> 
 
    <div ng-controller="MyController"> 
 
     <table> 
 
     <thead> 
 
      <tr> 
 
      <th>Season</th> 
 
      <th>Episode</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody ng-repeat="(key, value) in ::episodes | groupBy: 'season' | orderBy: 'key'"> 
 
      <tr ng-repeat="episode in ::value | orderBy: 'episode'" ng-class="{'final-of-type': $last}"> 
 
      <td>{{::episode.season}}</td> 
 
      <td>{{::episode.episode}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </body>

источник

2016-12-28 05:35:27

Вниз проголосовали за фильтры в dom. Они могут иметь очень большие последствия для производительности из-за запуска каждого цикла дайджест. Если сортировка должна быть выполнена, это должно быть сделано в контроллере, когда данные будут восстановлены. –

Для вас я добавил одноразовую привязку '::' –

Downvote удален. По-прежнему считайте, что препроцессирование было бы лучше, но, по крайней мере, сейчас это не будет баджиллион. –

Вы можете использовать $last из ng-repeat и ng-class в стиле последнего эпизода каждого сезона

данных

$scope.shows = [{ 
     "season" : "season 1", 
     "episodes" :["episode 1","episode 2","episode 3"] 
    }, 
    { 
     "season" : "season 2", 
     "episodes" : ["episode 1","episode 2","episode 3"] 
    }, 
    { 
     "season" : "season 3", 
     "episodes" : ["episode 1","episode 2","episode 3"] 
    } 
    ];

<tbody ng-repeat="show in shows"> 
    <tr ng-class="$last ? 'endSeason' : ''" ng-repeat="episode in show.episodes"> 
     <td>{{show.season}}</td> 
     <td>{{episode}}</td> 
    </tr> 
    </tbody>

FULL EXAMPLE

источник

2016-12-28 05:45:12 Nishant123

Это, безусловно, самое простое решение, если вы в порядке с предварительной обработкой данных в сезоны! Хотя, могу ли я предположить, что более простой синтаксис будет просто «ng-class =» «end-season»: $ last '"'? Я также назвал имя класса, потому что это более типично для имен классов :) –

ng-repeat: определить изменение значения элемента в отсортированном списке

ответ

Смежные вопросы