Javascript 使用ng repeat创建特定元素后隐藏它们

我试图在我的页面上创建一个钢琴，使用两个图像文件：白键和黑键

我已经创建了它们，但是钢琴上的黑键以2和3为一组交替出现，我会隐藏索引[1,4（1+3），8（4+4），11（8+3），15（11+4），…，54]的黑键图像。不过，我不确定如何着手做这件事

这就是我创建它们的方式

HTML:

编辑：多亏了汉斯马德的回答，它才起作用

HTML:

JS:

self.keys=[]；
var keyGroupOf3=真；
self.keys.push（{black:true}）；//显示第一个键
var i=1；
而（i<54）{
self.keys.push（{black:false}）；
//alwasy之后至少有两个
self.keys.push（{black:true}）；
self.keys.push（{black:true}）；
if（keyGroupOf3）{
self.keys.push（{black:true}）；
i+=4；
}否则{
i+=3；
}

看看下面的Plunk。我没有添加任何css。但为了隐藏和显示图像，您可以使用此链接

我使用了

ng hide

在特定位置隐藏图像。

---

这是您要找的吗？如果不告诉我。

我认为您应该在控制器中创建键盘作为键数组。然后您可以使用单个

ng repeat

来绘制所有键。要绘制右

img

键，您可以使用

ng开关

或将imgage url存储在键中

一个没有图像但使用

ng class

的简单示例：

编辑：这可能是一个简单而愚蠢的填充密钥数组的算法：

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

}

this.keys=[]
var lastWasBlack=true；
var d=5；
var-next=5；
对于（变量i=0，e=55；i

---

隐藏钥匙是有效的，但这会导致钥匙被移除，而不会占用分配的空间。有没有办法将它们的可见性设置为“无”？user

ng class

或

ng style

那么有没有更简单的方法来选择特定的键，而不是为$index键入每个大小写？对于如何创建正确的键数，我有点困惑。有56个白键，但只有36个黑键。@user1742646我添加了控制器实现来填充键数组。谢谢！我让它工作，并将更新我的文章与我的代码。

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

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

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

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

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

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

}