Изменение ширины последней карты в сетке

0

Поэтому я использую angular-deckgrid для отображения изображений. У меня есть два столбца для отображения изображений с классом -1-2, как описано в документах внутри контейнера. Теперь в некоторых случаях их только одно изображение в последней строке, в таких случаях я хочу, чтобы это изображение занимало всю ширину вместо 50% пространства.

Вот как выглядят два столбца:

<div deckgrid="" class="deckgrid ng-isolate-scope" source="loves">
   <div data-ng-repeat="column in columns" class="column column-1-2">
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
   </div>
   <div data-ng-repeat="column in columns" class="column column-1-2">
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
      <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"> "my card layout here" </div>
   </div>
</div>

Как вы можете видеть, первый столбец имеет три и второй столбцы. Я хочу, чтобы третья карта в первом столбце принимала всю ширину. Невозможно сделать это в контроллере, потому что шаблон еще не отображается. Использование css я было чем-то в этом направлении ::

.column-1-2 div[data-ng-repeat]:last-child {
    width:200%!important;
}

но как я могу проверить, имеет ли первый столбец и второй столбец неравный ребенок в css.

благодаря

Теги:
angularjs-ng-repeat

2 ответа

0

Возможно, вы захотите использовать функции "Угловые встроенные"

var firstChildCount =  angular.element(angular.element(".column")[0]).find('div').length;
var secondChildCount =  angular.element(angular.element(".column")[1]).find('div').length;

if(firstChildCount  !== secondChildCount ){
     //Apply CSS
}
Поделиться
0

Возможно, я ошибаюсь, но вы можете использовать $ last свойство ng-repeat в сочетании с ng-классом. Он добавит класс mylast-child к последнему div ng-repeat

 <div data-ng-repeat="card in column" 
      data-ng-include="cardTemplate" class="ng-scope"
      ng-class="{'mylast-child': $last}" > 
             "my card layout here"
 </div>


 .mylast-child {
     width:200%!important;
 }

у ng-repeat есть и другой интересный вариант:

Variable |  Type     |  Details
--------------------------------
$index   |   number |    iterator offset of the repeated element (0..length-1)
$first   |   boolean |  true if the repeated element is first in the iterator.
$middle  |  boolean | true if the repeated element is between the first and last in the iterator.
$last    |   boolean |  true if the repeated element is last in the iterator.
$even    |   boolean |  true if the iterator position $index is even (otherwise false).
$odd     |   boolean |  true if the iterator position $index is odd (otherwise false).
Поделиться
  • 0
    на самом деле эти ng-повторы добавляются динамически из этого плагина, его нет в моем шаблоне для редактирования
  • 0
    какой плагин? Вы не можете изменить HTML?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню