角度js ng重複灰色選項CSS

Question

我似乎無法找到一種方法來創建一個項目，其中一些項目是灰色的ng重複列表的方式。

在離子框架中，如果您指定一個等於list的div類，那麼每個具有item類的子元素都具有某些css屬性，使該項顯示爲列表中的項目。

我想要做的是將列表中的某些項目變爲灰色（即不可點擊和灰色）。

將背景顏色設置爲灰色並非解決方案，因爲文本和圖像等不會變灰。快速谷歌搜索建議做到這一點的方法是創建一個透明灰色覆蓋div。

但是，我無法在列表中的項目上創建疊加層，因爲ng-repeat會一個接一個地重複這些事情，我無法弄清楚如何爲每個ng-repeat元素插入一個相同大小的div。

這樣做的最好方法是什麼？我已經創建了一個笨蛋來說明我遇到麻煩的地方。我無法獲得可以灰色覆蓋物品的空白div ......有什麼建議嗎？

這裏的plunker：

http://plnkr.co/edit/rE4gGNBnQpFNTJmAaf7f

我也挖成離子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; } 

Answer 1

基本想法是在每個列表元素內部有一個空的<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; 
} 

我已經更新your plunker accordingly。