angular js ng-repeat с серыми параметрами CSS

Кажется, я не могу найти способ создать список элементов ng-repeat, из которых некоторые элементы выделены серым цветом.

В ionic framework, если вы назначаете класс div равным list, то каждый подэлемент, который имеет класс item, имеет определенные свойства css, благодаря которым этот элемент отображается как элемент в списке.

Я бы хотел, чтобы некоторые элементы в списке были «выделены серым цветом» (т.е. недоступными для клика и серыми).

Установка серого цвета фона не является решением, потому что тогда текст, изображение и т. д. не будут выделены серым цветом. Быстрый поиск в Google подсказывает, что это можно сделать, создав серый оверлейный div с прозрачностью.

Однако у меня возникли проблемы с созданием наложения на элементы в списке, потому что ng-repeat повторяет вещи один за другим, и я не могу понять, как вставить div одинакового размера для каждого элемента ng-repeat.

Как лучше всего это сделать? Я создал плункер, чтобы проиллюстрировать, где у меня проблемы. Я не могу заставить пустой div, который может быть серым, накладываться на элементы... Есть предложения?

Вот плунжер:

http://plnkr.co/edit/rE4gGNBnQpFNTJmAaf7f

Я также копался в ionic css, чтобы найти детали css как для списка, так и для элемента, вот они:

.item {
  border-color: #ddd;
  background-color: #fff;
  color: #444;
  position: relative;
  z-index: 2;
  display: block;
  margin: -1px;
  padding: 15px;
  border-width: 1px;
  border-style: solid;
  font-size: 16px; }
  .item h2 {
    margin: 0 0 4px 0;
    font-size: 16px; }

.list {
  position: relative;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0;
  margin-bottom: 20px; }

ionic-framework css angularjs
person Terence Chow    schedule 01.09.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Основная идея состоит в том, чтобы иметь пустой <div class="overlay"></div> внутри каждого элемента списка:

<div ng-repeat="person in persons" ng-class="{true:'greyed item', false:'item'}[person.grey]">
    <a class="item item-avatar" href="#/app/person/{{person.id}}">
      <img ng-src="{{person.picture}}" />
      <h2>{{person.name}}</h2>
    </a>
    <div class="overlay"></div>
</div>

Затем примените стили к селектору .greyed.item .overlay:

.item.greyed .overlay{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color:#eee;
  z-index:5;
  opacity:0.7;
  cursor: arrow;
}

Я обновил ваш плункер соответствующим образом.

person miensol    schedule 01.09.2014
comment
Аргх, ты меня опередил :) Я бы тоже добавил margin: 15px;, кроме этого +1. - person ivarni; 01.09.2014