使用ng-repeat創建它們後隱藏特定元素

Question

我試圖在我的頁面上使用兩個圖像文件創建鋼琴：白鍵和黑鍵。我已經創建了它們，但鋼琴上的黑鍵以2和3的組相互替換，我會隱藏索引的黑色關鍵圖像[1,4（1 + 3），8（4 + 4） ），11（8 + 3），15（11 + 4），...，54]。我不確定如何去做這件事。

這就是我創建它們的方式。

HTML：

<div ng-controller="DrawCtrl as draw"> 
      <ul class="white-keys"> 
       <li ng-repeat="t in draw.range(56) track by $index"> 
        <img ng-src={{draw.white_key}} /> 
       </li> 
      </ul> 
      <ul class="black-keys"> 
       <li ng-repeat="t in draw.range(55) track by $index"> 
        <img ng-src={{draw.black_key}} /> 
       </li> 
      </ul> 
     </div> 

JS：

angular.module('app') 
.controller('DrawCtrl', function() { 
    var self = this; 
    self.piano_back = 'img/background.png'; 
    self.white_key = 'img/midi_white_up.png'; 
    self.black_key = 'img/midi_black_up.png'; 
    self.range = function(num) { 
     return new Array(num); 
    }; 
}); 

編輯：得到它的工作多虧hansmaad的答案。

HTML：

   <ul class="black-keys"> 
       <li ng-repeat="key in draw.keys" ng-switch="key.black"> 
        <img ng-switch-when="true" ng-src={{draw.black_key}} /> 
        <img ng-switch-when="false" ng-src={{draw.black_key}} class="black-hidden" /> 
       </li> 
      </ul> 

JS：

self.keys = []; 
    var keyGroupOf3 = true; 

    self.keys.push({black: true}); // first key is shown 
    var i = 1; 
    while (i < 54) { 
     self.keys.push({black: false}); 
     // alwasy followed by at least two 
     self.keys.push({black: true}); 
     self.keys.push({black: true}); 
     if (keyGroupOf3){ 
      self.keys.push({black: true}); 
      i += 4; 
     } else { 
      i += 3; 
     } 

Answer 1

我想你應該在控制器中創建鍵盤數組。然後您可以使用一個ng-repeat來繪製所有的鍵。要爲密鑰繪製正確的img，您可以使用ng-switch或將密碼url存儲在密鑰中。

一個簡單的例子，沒有圖像，但使用ng-class：

http://plnkr.co/edit/kIvRqdkbHHNcUXKzSLZC?p=preview

<div ng-controller="DrawCtrl as draw"> 
    <ul > 
     <li ng-repeat="key in draw.keys" ng-class="{ 'black' : key.black, 'white' : !key.black}"> 
     </li> 
    </ul> 
</div> 

控制器：

function DrawCtrl() { 
    this.keys = [] 
    for(var i = 0, e = 55; i < e; ++i) { 
    this.keys.push({ 
     black : isBlackKey(i) 
    }); 

    } 

    function isBlackKey(i) { 
    // your piano logic here 
    return i % 2 == 0; 
    } 
} 

使用ng-switch你可以這樣做：

<ul> 
     <li ng-repeat="key in draw.keys" ng-switch="key.black"> 
      <span ng-switch-when="true">Black key</span> 
      <span ng-switch-when="false">White key</span> 
     </li> 
    </ul> 

編輯：這可能是一個簡單的，愚蠢的算法來填充鍵數組：

this.keys = [] 

    var lastWasBlack = true; 
    var d = 5; 
    var next = 5; 
    for(var i = 0, e = 55; i < e; ++i) { 

    var isBlack = !lastWasBlack; 
    if (i === next) { 
     isBlack =!isBlack; 
     d = d === 5 ? 7 : 5; 
     next += d; 
    } 
    this.keys.push({ 
     black : isBlack 
    }); 

    lastWasBlack = isBlack; 
    } 

} 

http://plnkr.co/edit/kIvRqdkbHHNcUXKzSLZC?p=preview

Answer 2

看一看下面plunker。我沒有添加任何CSS。但爲了隱藏和顯示圖像，您可以使用此鏈接。

http://plnkr.co/edit/pgFKHShXpeS4EQhoaFTI?p=preview

<ul class="white-keys"> 
    <li ng-repeat="t in draw.range(20) track by $index"> 
    <img ng-src='http://lorempixel.com/g/50/15/technics' ng-hide="($index == 1 || $index == 4 || $index == 8 || $index == 11)"/> 
    </li> 
</ul> 

我已經使用ng-hide隱藏在特定位置的圖像。 這是你正在尋找？如果不讓我知道。