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或将密码网址存储在密钥中。

一个没有图片但使用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隐藏特定位置的图像。这是你在找？如果不让我知道。

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

2 个答案: