CODEWITHSUNDEEP
cssangularjsionic-framework
Terence Chow
Terence Chow

Reputation: 11153

angular js ng-repeat with greyed out options CSS

I can't seem to figure out a way to create an ng-repeat list of items, of which some items are greyed out.

In ionic framework, if you designate a div class equal to list then each sub element which has a class item has certain css properties that make that item show up looking like an item in a list.

What I'd like to do is have some of the items in the list 'greyed out' (i.e unclickable and grey).

Setting the background-color to be grey isn't a solution because then the text and image etc are not greyed out. A quick google search suggests the way to do this is to create a grey overlay div with transparency.

However I'm having trouble creating an overlay on the items in the list because ng-repeat repeats things one after another and I can't figure out how to insert a div of equal size for each ng-repeat element.

What's the best way to do this? I've created a plunker to illustrate where I'm having trouble. I can't get the empty div that can be grey to overlay on the items...Any suggestions?

Here's the plunker:

http://plnkr.co/edit/rE4gGNBnQpFNTJmAaf7f

I've also dug into the ionic css to find the css details for both list and for item here they are:

.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; }

Upvotes: 1

Views: 3094

Answers (1)

miensol
miensol

Reputation: 41648

The basic idea is to have an empty <div class="overlay"></div> inside each list element:

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

And then apply styles to the .greyed.item .overlay selector:

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

I've updated your plunker accordingly.

Upvotes: 4

Related Questions