title: angular js ng-repeat with greyed out options CSS
body: <p>I can't seem to figure out a way to create an ng-repeat list of items, of which some items are greyed out. </p>
  
  <p>In ionic framework, if you designate a div class equal to <code>list</code> then each sub element which has a class <code>item</code> has certain css properties that make that item show up looking like an item in a list. </p>
  
  <p>What I'd like to do is have some of the items in the list 'greyed out' (i.e unclickable and grey). </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>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?</p>
  
  <p>Here's the plunker:</p>
  
  <p><a href="http://plnkr.co/edit/rE4gGNBnQpFNTJmAaf7f" rel="nofollow">http://plnkr.co/edit/rE4gGNBnQpFNTJmAaf7f</a></p>
  
  <p>I've also dug into the ionic css to find the css details for both list and for item here they are:</p>
  
  <pre><code>.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; }
  </code></pre>