javascript - Hiding specific elements after creating them with ng-repeat -

i'm trying create piano on page using 2 image files: white-key , black-key.

i've created them, black keys on piano alternate in groups of 2 , 3 , i'd hide black key images indices [1, 4(1+3), 8(4+4), 11(8+3), 15(11+4), .., 54]. i'm unsure of how go doing though.

this how created them.

html:

<div ng-controller="drawctrl draw">             <ul class="white-keys">                 <li ng-repeat="t in draw.range(56) track $index">                     <img ng-src={{draw.white_key}} />                 </li>             </ul>             <ul class="black-keys">                 <li ng-repeat="t in draw.range(55) track $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);     }; }); 

edit: got working hansmaad's answer.

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 shown     var = 1;     while (i < 54) {         self.keys.push({black: false});         // alwasy followed @ least 2         self.keys.push({black: true});         self.keys.push({black: true});         if (keygroupof3){             self.keys.push({black: true});             += 4;         } else {             += 3;         } 

i think should create keyboard in controller array of keys. can use single ng-repeat draw keys. draw right img key can use ng-switch or store imgage url in key.

a simple example without images using ng-class:

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

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

controller:

function drawctrl() {   this.keys = []   for(var = 0, e = 55; < e; ++i) {     this.keys.push({       black : isblackkey(i)     });    }    function isblackkey(i) {     // piano logic here     return % 2 == 0;   } } 

using ng-switch do:

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

edit: simple, stupid algorithm fill keys array:

  this.keys = []    var lastwasblack = true;   var d = 5;   var next = 5;   for(var = 0, e = 55; < 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